/* ==========================================================================
   Digimanic — stylesheet
   Palette: primary #2c8cf4 · dark #111827 · white #fff
   ========================================================================== */

:root{
  --primary:#2c8cf4;
  --primary-dark:#1f6fd1;
  --primary-tint:#eaf3ff;
  --dark:#111827;
  --dark-2:#1a2438;
  --dark-3:#212d45;
  --dark-line:#2a364f;
  --dark-muted:#8f9ab3;
  --white:#ffffff;
  --ink:#111827;
  --muted:#6b7280;
  --line:#e6e9f0;
  --bg-soft:#f6f8fb;

  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-soft:0 20px 45px rgba(17,24,39,.08);
  --shadow-blue:0 16px 40px rgba(44,140,244,.18);
}

*{font-family:'Plus Jakarta Sans',sans-serif;}
html{scroll-behavior:smooth;}
body{color:var(--ink); background:var(--white); overflow-x:hidden;}
a{text-decoration:none;}
h1,h2,h3{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; letter-spacing:-0.02em;}

.eyebrow{
  font-size:.78rem; font-weight:700; color:var(--primary);
}
.eyebrow.on-dark{color:#7db4fb;}

.btn-brand{
  background:var(--primary); color:var(--white); border:none; font-weight:600; padding:.75rem 1.6rem; border-radius:var(--radius-sm);
  transition:.25s ease;
}
.btn-brand:hover{background:var(--primary-dark); color:var(--white); transform:translateY(-2px); box-shadow:var(--shadow-blue);}
.btn-brand:disabled{opacity:.7; transform:none; box-shadow:none; cursor:not-allowed;}

.btn-outline-brand{
  border:1.5px solid var(--line); color:var(--ink); font-weight:600; padding:.75rem 1.6rem; border-radius:var(--radius-sm); background:var(--white);
  transition:.25s ease;
}
.btn-outline-brand:hover{border-color:var(--primary); color:var(--primary); transform:translateY(-2px);}

.btn-outline-light{
  border:1.5px solid rgba(255,255,255,.28); color:var(--white); font-weight:600; padding:.75rem 1.6rem; border-radius:var(--radius-sm); background:transparent;
  transition:.25s ease;
}
.btn-outline-light:hover{border-color:var(--white); background:rgba(255,255,255,.08); transform:translateY(-2px); color:var(--white);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar{
  padding:1rem 0; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid transparent; transition:.3s ease;
}
.navbar.scrolled{background:#fff; box-shadow:0 2px 20px rgba(17,24,39,.07); padding:.6rem 0; border-bottom-color:var(--line);}
.navbar .nav-link{
  color:#2b3242; font-weight:500; font-size:.92rem; margin:0 .7rem; transition:.2s;
}
.navbar .nav-link:hover{color:var(--primary);}
.navbar-brand img{height:32px;}

/* ==========================================================================
   HERO — light theme
   ========================================================================== */
.hero{
  background:
    radial-gradient(ellipse 620px 420px at 88% -10%, rgba(44,140,244,.14), transparent 65%),
    var(--white);
  color:var(--ink); padding:150px 0 70px; position:relative; overflow:hidden;
}
.badge-pill{
  background:var(--primary-tint); border:1px solid rgba(44,140,244,.28); color:var(--primary-dark);
  border-radius:30px; padding:.4rem 1rem; font-size:.78rem; font-weight:600; display:inline-flex; align-items:center; gap:.5rem;
}
.badge-pill .dot{width:6px; height:6px; border-radius:50%; background:var(--primary);}
.hero h1{font-size:3.2rem; line-height:1.08; color:var(--ink);}
.hero .grad-text{
  background:linear-gradient(90deg,var(--primary),#5aa9ff); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{color:var(--muted); font-size:1.05rem; max-width:520px;}

.pulse-card{
  background:var(--dark); color:var(--white); border:1px solid var(--dark-line); border-radius:var(--radius-lg); padding:1.4rem;
  box-shadow:0 25px 60px rgba(17,24,39,.22);
}
.pulse-card .badge-up{
  background:rgba(44,140,244,.18); color:#7db4fb; font-size:.72rem; font-weight:700; padding:.25rem .6rem; border-radius:20px;
}
.bar-chart{height:130px; display:flex; align-items:flex-end; gap:6px; margin-top:1rem;}
.bar-chart .bar{
  flex:1; background:linear-gradient(180deg,#5aa9ff,var(--primary)); border-radius:4px 4px 0 0;
  height:0; transition:height 1.1s cubic-bezier(.2,.8,.2,1);
}
.pulse-stat{border-top:1px solid var(--dark-line); padding-top:.9rem; margin-top:1rem;}
.pulse-stat .num{font-weight:800; font-size:1.05rem;}
.pulse-stat .lbl{font-size:.68rem; color:var(--dark-muted); letter-spacing:.06em; text-transform:uppercase;}

.logo-strip{border-top:1px solid var(--line); margin-top:60px; padding-top:26px;}
.logo-strip .tag{font-size:.75rem; color:var(--muted); font-weight:700;}
.logo-strip .brand-name{color:#404a5e; font-weight:700; font-size:.95rem; opacity:.65;}

/* hero trust-stack of avatars */
.avatar-stack{display:flex; align-items:center;}
.avatar-stack img{
  width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--white);
  margin-left:-10px; box-shadow:0 2px 6px rgba(17,24,39,.12);
}
.avatar-stack img:first-child{margin-left:0;}
.avatar-stack-more{
  width:45px; height:45px; border-radius:50%; background:var(--primary-tint); color:var(--primary-dark);
  display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:800;
  margin-left:-10px; border:2px solid var(--white);
}

/* ==========================================================================
   LOGO MARQUEE
   ========================================================================== */

.marquee-label{
  text-align:center; color:var(--muted); font-size:.85rem; font-weight:600; margin-bottom:1.4rem;
}
.marquee-track{
  display:flex; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-content{
  display:flex; align-items:center; gap:3.5rem; width:max-content; flex-shrink:0;
  padding-right:3.5rem;
  animation:marqueeScroll 38s linear infinite;
}
.marquee-track:hover .marquee-content{animation-play-state:paused;}
.logo-box{
  height:64px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.logo-box img{
  max-height:100%; max-width:230px; width:auto; object-fit:contain;
  transition:filter .25s ease;
}
.logo-box img:hover{filter:grayscale(0) opacity(1);}

@keyframes marqueeScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-100%);}
}

/* ==========================================================================
   STATS — dark
   ========================================================================== */
.stats-section{background:var(--dark); color:var(--white); padding:90px 0;}
.stat-box{
  background:var(--dark-2); border:1px solid var(--dark-line); border-radius:var(--radius-md); padding:1.6rem 1.4rem; height:100%;
  transition:.3s ease;
}
.stat-box:hover{transform:translateY(-4px); border-color:var(--primary);}
.stat-box .icon-wrap{
  width:34px; height:34px; border-radius:8px; background:rgba(44,140,244,.16); display:flex; align-items:center; justify-content:center;
  color:#7db4fb; margin-bottom:.9rem; font-size:1rem;
}
.stat-box .num{font-size:1.9rem; font-weight:800;}
.stat-box .lbl{color:var(--dark-muted); font-size:.85rem;}

/* ==========================================================================
   SECTION GENERIC
   ========================================================================== */
.section{padding:96px 0;}
.section-title h2{font-size:2.1rem; color:var(--ink);}
.section-title p{color:var(--muted); max-width:620px;}
.section-title.on-dark h2{color:var(--white);}
.section-title.on-dark p{color:var(--dark-muted);}

/* ==========================================================================
   WHAT WE DO — light
   ========================================================================== */
.service-card{
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; height:100%; transition:.3s ease; background:var(--white);
}
.service-card:hover{box-shadow:var(--shadow-soft); transform:translateY(-4px); border-color:var(--line);}
.service-card .service-img{
  width:100%; height:190px; object-fit:cover; display:block;
}
.service-card .service-body{padding:1.8rem;}
.service-card .tag{font-size:.78rem; color:var(--muted); font-weight:700;}
.service-card h3{font-size:1.3rem; margin:.4rem 0 .8rem; color:var(--ink); display:flex; align-items:center; gap:.6rem;}
.service-card .icon-circle{
  width:40px; height:40px; border-radius:10px; background:var(--primary-tint); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0;
}
.service-card ul{list-style:none; padding:0; margin:1rem 0 0;}
.service-card ul li{font-size:.9rem; color:#3d4658; margin-bottom:.55rem; display:flex; gap:.6rem; align-items:flex-start;}
.service-card ul li i{color:var(--primary); margin-top:.2rem;}
.mini-pill{
  border:1px solid var(--line); border-radius:10px; padding:.85rem 1rem; font-size:.85rem; font-weight:600; color:#2b3242;
  display:flex; align-items:center; gap:.55rem; height:100%; background:var(--white); transition:.25s ease;
}
.mini-pill:hover{border-color:var(--primary); box-shadow:0 10px 24px rgba(44,140,244,.1); transform:translateY(-2px);}
.mini-pill i{color:var(--primary);}

/* generic image frame used across sections */
.img-frame{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft);}
.img-frame img{width:100%; height:100%; object-fit:cover; display:block;}

/* ==========================================================================
   RESULTS — dark
   ========================================================================== */
.results-section{background:var(--dark); color:var(--white);}
.outcome-card{
  border:1px solid var(--dark-line); border-radius:var(--radius-lg); padding:1.8rem; height:100%; transition:.3s ease; background:var(--dark-2);
}
.outcome-card:hover{box-shadow:0 20px 45px rgba(0,0,0,.35); transform:translateY(-4px); border-color:var(--primary);}
.outcome-card .tag{font-size:.75rem; font-weight:700; color:#7db4fb;}
.outcome-card h3{font-size:1.5rem; margin:.4rem 0 .6rem; color:var(--white);}
.outcome-card p{color:var(--dark-muted); font-size:.9rem;}
.metric-pair{display:flex; gap:.6rem; margin-top:1rem;}
.metric-chip{background:var(--dark-3); border-radius:8px; padding:.5rem .8rem; flex:1;}
.metric-chip .num{font-weight:800; color:#7db4fb; font-size:1rem;}
.metric-chip .lbl{font-size:.7rem; color:var(--dark-muted); letter-spacing:.04em;}

.results-brands .brand-name{color:var(--dark-muted); font-weight:700;}
.results-badges .mini-pill{background:var(--dark-2); border-color:var(--dark-line); color:#dfe4ee;}
.results-badges .mini-pill i{color:#7db4fb;}

/* ==========================================================================
   PROCESS — light
   ========================================================================== */
.process-step .step-num{
  width:44px; height:44px; border-radius:10px; background:var(--primary-tint); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:1rem;
}
.process-step .idx{font-size:.78rem; font-weight:800; color:var(--primary); letter-spacing:.06em;}
.process-step h3{font-size:1.1rem; margin:.3rem 0 .5rem; color:var(--ink);}
.process-step p{color:var(--muted); font-size:.9rem;}

/* ==========================================================================
   MID-PAGE CTA BANNER — accent blue
   ========================================================================== */
.mid-cta{
  position:relative; background:linear-gradient(120deg,#1f6fd1,#2c8cf4 55%,#4c9dff); color:var(--white);
  padding:70px 0; overflow:hidden;
}
.mid-cta::before{
  content:""; position:absolute; inset:0; background-image:url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1600&q=60');
  background-size:cover; background-position:center; opacity:.16; mix-blend-mode:overlay;
}
.mid-cta::after{
  content:""; position:absolute; top:-140px; right:-100px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
}
.mid-cta .container{position:relative; z-index:1;}
.mid-cta h2{color:var(--white); font-size:1.9rem;}
.mid-cta p{color:rgba(255,255,255,.85); max-width:480px;}
.mid-cta .btn-cta-white{
  background:var(--white); color:var(--primary-dark); border:none; font-weight:700; padding:.8rem 1.7rem; border-radius:var(--radius-sm);
  transition:.25s ease;
}
.mid-cta .btn-cta-white:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,.2); color:var(--primary-dark);}
.mid-cta .mid-cta-stats{display:flex; gap:2rem; flex-wrap:wrap; margin-top:1.6rem;}
.mid-cta .mid-cta-stats .num{font-size:1.5rem; font-weight:800; display:block;}
.mid-cta .mid-cta-stats .lbl{font-size:.72rem; color:rgba(255,255,255,.75); text-transform:uppercase; letter-spacing:.05em;}

/* ==========================================================================
   WHY DIGIMANIC — dark
   ========================================================================== */
.why-section{background:var(--dark); color:var(--white); padding:96px 0;}
.why-card{
  background:var(--dark-2); border:1px solid var(--dark-line); border-radius:var(--radius-md); padding:1.6rem; height:100%; transition:.3s ease;
}
.why-card:hover{border-color:var(--primary); transform:translateY(-4px);}
.why-card .icon-circle{
  width:42px; height:42px; border-radius:10px; background:rgba(44,140,244,.16); color:#7db4fb; display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-bottom:1rem;
}
.why-card h3{font-size:1.05rem; color:var(--white);}
.why-card p{color:var(--dark-muted); font-size:.88rem; margin-bottom:0;}
.pod-banner{
  background:var(--dark-2); border:1px solid var(--dark-line); border-radius:var(--radius-lg); overflow:hidden;
  display:flex; align-items:stretch; gap:0; flex-wrap:wrap; margin-top:2rem;
}
.pod-banner .pod-copy{padding:1.8rem 2rem; flex:1 1 320px; display:flex; flex-direction:column; justify-content:center; gap:.9rem;}
.pod-banner p{color:var(--dark-muted); font-size:.92rem; margin-bottom:0;}
.pod-banner .pod-img{flex:1 1 280px; min-height:220px;}
.pod-banner .pod-img img{width:100%; height:100%; object-fit:cover; display:block;}
.pod-badge{background:rgba(44,140,244,.16); color:#7db4fb; font-size:.78rem; font-weight:700; padding:.5rem 1rem; border-radius:20px; display:inline-flex; align-items:center; gap:.4rem; width:fit-content;}

/* ==========================================================================
   TESTIMONIALS — light
   ========================================================================== */
.testi-card{
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.8rem; height:100%; background:var(--white); transition:.3s ease;
}
.testi-card:hover{box-shadow:var(--shadow-soft); transform:translateY(-4px);}
.testi-card .quote-icon{color:var(--primary-tint); font-size:1.8rem;}
.quote-icon i{
  color:var(--primary);
}
.testi-card p.quote{color:var(--muted); font-style:italic; font-size:.92rem; min-height:80px;}
.testi-avatar{
  width:42px; height:42px; border-radius:50%; object-fit:cover; border:1px solid var(--line);
}
.testi-name{font-weight:700; font-size:.88rem; color:var(--ink);}
.testi-role{color:var(--muted); font-size:.78rem;}

/* ==========================================================================
   CTA / CONTACT — dark
   ========================================================================== */
.cta-section{background:var(--dark); color:var(--white); padding:96px 0;}
.cta-section h2{font-size:2.2rem; color:var(--white);}
.cta-section .lead{color:var(--dark-muted);}
.check-list li{display:flex; gap:.6rem; align-items:center; margin-bottom:.85rem; color:#c6cedd; font-size:.92rem;}
.check-list i{color:var(--primary);}
.contact-form{
  background:var(--dark-2); border:1px solid var(--dark-line); border-radius:var(--radius-lg); padding:1.8rem;
}
.contact-form label{font-size:.75rem; color:var(--dark-muted); font-weight:700; margin-bottom:.4rem;}
.contact-form .form-control, .contact-form .form-select{
  background:var(--dark); border:1px solid var(--dark-line); color:var(--white); border-radius:8px; padding:.7rem .9rem; font-size:.9rem;
}
.contact-form .form-control::placeholder{color:#5a6580;}
.contact-form .form-control:focus, .contact-form .form-select:focus{
  background:var(--dark); border-color:var(--primary); color:var(--white); box-shadow:0 0 0 3px rgba(44,140,244,.25);
}
.contact-form select option{background:var(--dark);}
.contact-form .invalid-feedback{color:#ff8a8a; font-size:.76rem; margin-top:.25rem;}
.contact-form .form-control.is-invalid, .contact-form .form-select.is-invalid{border-color:#ff6b6b;}
.contact-form .form-control.is-invalid ~ .invalid-feedback,
.contact-form .form-select.is-invalid ~ .invalid-feedback{display:block;}

/* Contact info block (phone/email under the checklist) */
.contact-info a{color:#c6cedd;}
.contact-info a:hover{color:#7db4fb;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{background:#0d1420; color:var(--dark-muted); padding:60px 0 20px;}
footer h5{color:var(--white); font-size:.95rem; font-weight:700; margin-bottom:1rem;}
footer a{color:var(--dark-muted); font-size:.88rem; display:block; margin-bottom:.6rem; transition:.2s;}
footer a:hover{color:#7db4fb;}
footer .social-icon{
  width:36px; height:36px; border-radius:50%; background:var(--dark-2); display:inline-flex; align-items:center; justify-content:center; color:var(--white); margin-right:.6rem;
  transition:.2s;
}
footer .social-icon i{
  color:var(--white); font-size:1.05rem;
}
footer .social-icon:hover{background:var(--primary);}
.footer-bottom{border-top:1px solid var(--dark-line); margin-top:2.5rem; padding-top:1.5rem; font-size:.82rem;}

/* ==========================================================================
   WHATSAPP FLOATING BUTTON
   ========================================================================== */
.whatsapp-float{
  position:fixed; bottom:24px; right:24px; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; box-shadow:0 8px 24px rgba(0,0,0,.25); z-index:1050; transition:.25s;
}
.whatsapp-float:hover{transform:scale(1.08); color:#fff;}

/* floating social stack, sits above the WhatsApp button */
.social-float-stack{
  position:fixed; bottom:92px; right:24px; display:flex; flex-direction:column; gap:.6rem; z-index:1049;
}
.social-float-stack a{
  width:42px; height:42px; border-radius:50%; background:var(--dark); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
  box-shadow:0 8px 20px rgba(17,24,39,.22); transition:.2s ease;
}
.social-float-stack a:hover{background:var(--primary); color:var(--white); transform:scale(1.08);}
@media(max-width:767px){
  .social-float-stack{bottom:84px; right:16px;}
  .whatsapp-float{right:16px;}
}

/* ==========================================================================
   REVEAL ANIMATION (one orchestrated entrance per section)
   ========================================================================== */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-delay-1{transition-delay:.08s;}
.reveal-delay-2{transition-delay:.16s;}
.reveal-delay-3{transition-delay:.24s;}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .marquee-content{animation:none;}
  .bar-chart .bar{transition:none;}
}

@media(max-width:767px){
  .hero{padding:130px 0 50px;}
  .hero h1{font-size:2.1rem;}
  .section{padding:64px 0;}
  .stats-section, .why-section, .cta-section{padding:64px 0;}
  .logo-box{height:44px;}
  .logo-box img{max-width:150px;}
}

/* Testimonials Slider */
.testimonial-slider .testi-slide{
    padding:12px;
}

.testi-card{
    background:#fff;
    border:1px solid #e8eef5;
    border-radius:20px;
    padding:28px;
    height:100%;
    box-shadow:0 10px 35px rgba(0,0,0,.06);
    transition:.3s ease;
}

.testi-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 45px rgba(61,172,226,.18);
}

.quote-icon{
    width:55px;
    height:55px;
    background:rgba(61,172,226,.1);
    color:var(--primary);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    margin-bottom:18px;
}

.quote{
    color:#556070;
    font-size:15px;
    line-height:1.8;
    margin-bottom:22px;
    min-height:130px;
}

.testi-name{
    font-size:18px;
    font-weight:700;
    color:#111827;
}

.testi-role{
    font-size:14px;
    color:#64748b;
}

/* Slick Dots */
.testimonial-slider .slick-dots{
    bottom:-45px;
}

.testimonial-slider .slick-dots li button:before{
    font-size:11px;
    color:var(--primary);
    opacity:.35;
}

.testimonial-slider .slick-dots li.slick-active button:before{
    opacity:1;
    color:var(--primary);
}

/* Slick Arrows */
.testimonial-slider .slick-prev,
.testimonial-slider .slick-next{
    width:45px;
    height:45px;
    border-radius:50%;
    background:var(--primary);
    z-index:2;
}

.testimonial-slider .slick-prev{ left:-18px; }
.testimonial-slider .slick-next{ right:-18px; }

.testimonial-slider .slick-prev:before,
.testimonial-slider .slick-next:before{
    color:#fff;
    font-size:18px;
    opacity:1;
}

/* ===============================
   DIGIMANIC CTA RIBBON
================================== */

/* =========================================================
   DIGIMANIC — PREMIUM CTA RIBBON
========================================================= */

.cta-ribbon {
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}

/* Main CTA Box */
.cta-ribbon-box {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(61, 172, 226, 0.20);
    border-radius: 30px;

    padding: 55px 60px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 55px;

    isolation: isolate;
}

/* Top Accent Line */
.cta-ribbon-box::before {
    content: "";
    position: absolute;

    top: 0;
    left: 8%;
    right: 8%;

    height: 3px;

    background: var(--primary);

    opacity: .8;
}

/* Decorative Glow */
.cta-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.cta-glow-one {
    width: 260px;
    height: 260px;

    right: -100px;
    top: -120px;

    background: rgba(61, 172, 226, .08);
    filter: blur(10px);
}

.cta-glow-two {
    width: 180px;
    height: 180px;

    left: -90px;
    bottom: -100px;

    background: rgba(61, 172, 226, .06);
    filter: blur(8px);
}


/* =========================================================
   CONTENT
========================================================= */

.cta-content {
    position: relative;
    z-index: 2;
    flex: 1;
    max-width: 720px;
}

/* Label */
.cta-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: var(--primary);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 16px;
}

.cta-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--primary);

    box-shadow:
        0 0 0 5px rgba(61, 172, 226, .10),
        0 0 15px rgba(61, 172, 226, .35);
}


/* Heading */
.cta-content h2 {
    margin: 0 0 17px;

    color: #0f172a;

    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -1.2px;
}

.cta-content h2 span {
    color: var(--primary);
}


/* Paragraph */
.cta-content p {
    margin: 0;

    max-width: 670px;

    color: #64748b;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.cta-highlights {
    display: flex;
    align-items: center;

    gap: 24px;

    margin-top: 26px;

    flex-wrap: wrap;
}

.cta-highlight {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #334155;

    font-size: 13px;
    font-weight: 700;
}

.cta-highlight i {
    color: var(--primary);

    font-size: 16px;
}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.cta-actions {
    position: relative;
    z-index: 2;

    width: 320px;

    display: flex;
    flex-direction: column;

    gap: 13px;

    flex-shrink: 0;
}


/* Common Button */
.cta-actions a {
    position: relative;

    min-height: 76px;

    padding: 13px 15px;

    border-radius: 17px;

    display: flex;
    align-items: center;

    gap: 13px;

    text-decoration: none;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease,
        border-color .3s ease;

    overflow: hidden;
}


/* Button Icon */
.cta-btn-icon {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    font-size: 17px;

    transition: .3s ease;
}


/* Button Text */
.cta-actions a > span:not(.cta-btn-icon) {
    display: flex;
    flex-direction: column;

    gap: 2px;

    min-width: 0;

    flex: 1;

    font-size: 15px;
    font-weight: 800;

    line-height: 1.25;
}

.cta-actions small {
    font-size: 10px;

    font-weight: 700;

    letter-spacing: .8px;

    text-transform: uppercase;

    opacity: .75;
}


/* Arrow */
.cta-arrow {
    font-size: 18px;

    transition:
        transform .3s ease;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.cta-btn-primary {
    background: var(--primary);
    color: #ffffff;

    box-shadow:
        0 12px 30px rgba(61, 172, 226, .22);
}

.cta-btn-primary .cta-btn-icon {
    background: rgba(255,255,255,.16);
}

.cta-btn-primary small {
    color: rgba(255,255,255,.8);
}

.cta-btn-primary:hover {
    background: #2797cf;
    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 18px 38px rgba(61, 172, 226, .30);
}

.cta-btn-primary:hover .cta-arrow {
    transform: translate(3px, -3px);
}


/* =========================================================
   SECONDARY BUTTON
========================================================= */

.cta-btn-secondary {
    background: #f8fcfe;
    color: #0f172a;

    border: 1px solid rgba(61, 172, 226, .20);
}

.cta-btn-secondary .cta-btn-icon {
    background: rgba(61, 172, 226, .10);
    color: var(--primary);
}

.cta-btn-secondary small {
    color: #64748b;
}

.cta-btn-secondary .cta-arrow {
    color: var(--primary);
}

.cta-btn-secondary:hover {
    background: #ffffff;

    color: #0f172a;

    border-color: rgba(61, 172, 226, .45);

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(15, 23, 42, .08);
}

.cta-btn-secondary:hover .cta-btn-icon {
    background: var(--primary);
    color: #ffffff;
}

.cta-btn-secondary:hover .cta-arrow {
    transform: translate(3px, -3px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

    .cta-ribbon {
        padding: 70px 0;
    }

    .cta-ribbon-box {
        padding: 45px 40px;

        flex-direction: column;

        align-items: flex-start;

        gap: 35px;
    }

    .cta-content {
        max-width: 100%;
    }

    .cta-actions {
        width: 100%;

        flex-direction: row;
    }

    .cta-actions a {
        flex: 1;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .cta-ribbon {
        padding: 55px 0;
    }

    .cta-ribbon-box {
        padding: 35px 25px;

        border-radius: 24px;

        gap: 28px;
    }

    .cta-label {
        font-size: 10px;

        letter-spacing: 1.5px;
    }

    .cta-content h2 {
        font-size: 32px;

        letter-spacing: -.7px;
    }

    .cta-content p {
        font-size: 14px;

        line-height: 1.7;
    }

    .cta-highlights {
        gap: 13px 18px;

        margin-top: 22px;
    }

    .cta-highlight {
        font-size: 12px;
    }

    .cta-actions {
        width: 100%;

        flex-direction: column;
    }

    .cta-actions a {
        width: 100%;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .cta-ribbon-box {
        padding: 30px 20px;
    }

    .cta-content h2 {
        font-size: 28px;
    }

    .cta-highlights {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 12px;
    }

    .cta-highlight:last-child {
        grid-column: span 2;
    }

    .cta-actions a {
        min-height: 70px;
    }

    .cta-btn-icon {
        width: 42px;
        height: 42px;
    }
}



/* =========================================================
   DIGIMANIC — PREMIUM NAVBAR
========================================================= */

.premium-navbar {
    padding: 14px 0;

    background: rgba(255, 255, 255, 0.90);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(15, 23, 42, 0.06);

    transition:
        padding .3s ease,
        background .3s ease,
        box-shadow .3s ease;

    z-index: 9999;
}


/* =========================================================
   NAVBAR ON SCROLL
========================================================= */

.premium-navbar.scrolled {
    padding: 9px 0;

    background: rgba(255, 255, 255, 0.96);

    box-shadow:
        0 8px 35px rgba(15, 23, 42, 0.08);
}


/* =========================================================
   LOGO
========================================================= */

.premium-brand {
    display: flex;
    align-items: center;

    text-decoration: none;

    padding: 0;

    position: relative;
}

.brand-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 5px 0;

    transition: transform .3s ease;
}

.brand-logo-wrap img {
    display: block;

    width: 150px;
    height: auto;

    object-fit: contain;

    transition: .3s ease;
}

.premium-brand:hover .brand-logo-wrap {
    transform: translateY(-1px);
}


/* =========================================================
   NAVIGATION
========================================================= */

.premium-nav {
    gap: 4px;
}

.premium-nav .nav-item {
    position: relative;
}

.premium-nav .nav-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    padding: 10px 14px !important;

    color: #475569;

    font-size: 14px;
    font-weight: 600;

    letter-spacing: .1px;

    border-radius: 10px;

    transition:
        color .25s ease,
        background .25s ease;
}


/* Hover Background */
.premium-nav .nav-link:hover {
    color: #0f172a;

    background: rgba(61, 172, 226, .06);
}




.premium-nav .nav-link:hover::after,
.premium-nav .nav-link.active::after {
    transform: scaleX(1);
}


/* Active Text */
.premium-nav .nav-link.active {
    color: #0f172a;
}


/* =========================================================
   CTA BUTTON
========================================================= */

.nav-cta-item {
    margin-left: 12px;
}

.nav-cta-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 11px 17px;

    min-height: 44px;

    color: #ffffff !important;

    background: var(--primary);

    border: 1px solid var(--primary);

    border-radius: 12px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

    box-shadow:
        0 8px 20px rgba(61, 172, 226, .20);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


/* Shine Effect */
.nav-cta-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.28),
        transparent
    );

    transform: skewX(-20deg);

    transition: left .6s ease;
}

.nav-cta-btn:hover::before {
    left: 130%;
}

.nav-cta-btn:hover {
    color: #ffffff !important;

    background: #2797cf;

    border-color: #2797cf;

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(61, 172, 226, .28);
}

.nav-cta-btn i {
    font-size: 15px;

    transition:
        transform .3s ease;
}

.nav-cta-btn:hover i {
    transform: translate(2px, -2px);
}


/* =========================================================
   MOBILE TOGGLER
========================================================= */

.premium-toggler {
    width: 44px;
    height: 44px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(61, 172, 226, .25) !important;

    border-radius: 12px;

    background: #ffffff;

    color: #0f172a;

    box-shadow:
        0 5px 18px rgba(15, 23, 42, .06);

    transition: .25s ease;
}

.premium-toggler i {
    font-size: 25px;

    line-height: 1;
}

.premium-toggler:hover {
    color: var(--primary);

    border-color: rgba(61, 172, 226, .45) !important;

    background: #f7fcfe;
}


/* Remove Bootstrap focus */
.premium-toggler:focus {
    box-shadow:
        0 0 0 4px rgba(61, 172, 226, .10);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .premium-navbar {
        padding: 11px 0;
    }

    .premium-navbar .navbar-collapse {
        margin-top: 15px;

        padding: 12px;

        background: rgba(255, 255, 255, .98);

        border: 1px solid rgba(15, 23, 42, .06);

        border-radius: 18px;

        box-shadow:
            0 15px 40px rgba(15, 23, 42, .08);
    }

    .premium-nav {
        gap: 2px;

        align-items: stretch !important;
    }

    .premium-nav .nav-link {
        width: 100%;

        padding: 12px 14px !important;

        border-radius: 10px;
    }

    .premium-nav .nav-link::after {
        display: none;
    }

    .premium-nav .nav-link:hover,
    .premium-nav .nav-link.active {
        background: rgba(61, 172, 226, .08);
    }

    .nav-cta-item {
        margin: 8px 0 2px;
    }

    .nav-cta-btn {
        width: 100%;

        justify-content: center;

        min-height: 48px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .premium-navbar {
        padding: 9px 0;
    }

    .brand-logo-wrap img {
        width: 135px;
    }

    .premium-navbar .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .premium-navbar .navbar-collapse {
        margin-top: 12px;

        border-radius: 16px;

        padding: 10px;
    }
}



/* =========================================================
   DIGIMANIC — PREMIUM 404 PAGE
========================================================= */

.error-page {
    position: relative;

    min-height: 680px;

    padding: 155px 0 100px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(61, 172, 226, .09),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(61, 172, 226, .08),
            transparent 30%
        ),
        #ffffff;
}


/* =========================================================
   DECORATIVE SHAPES
========================================================= */

.error-page .ty-shape {
    position: absolute;

    display: block;

    border-radius: 50%;

    border: 1px solid rgba(61, 172, 226, .14);

    background: rgba(61, 172, 226, .025);

    pointer-events: none;
}

.error-page .ty-shape::after {
    content: "";

    position: absolute;

    inset: 20%;

    border-radius: 50%;

    border: 1px solid rgba(61, 172, 226, .09);
}


/* =========================================================
   CONTENT
========================================================= */

.error-content {
    position: relative;

    max-width: 850px;

    margin: 0 auto;

    text-align: center;

    z-index: 2;
}


/* =========================================================
   EYEBROW
========================================================= */

.error-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-bottom: 8px;

    color: var(--primary);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.error-eyebrow::before,
.error-eyebrow::after {
    content: "";

    width: 28px;
    height: 1px;

    background: rgba(61, 172, 226, .35);
}


/* =========================================================
   404 NUMBER
========================================================= */

.error-code {
    margin: 0;

    font-size: clamp(130px, 20vw, 230px);

    line-height: .85;

    font-weight: 900;

    letter-spacing: -12px;

    color: transparent;

    background: linear-gradient(
        135deg,
        var(--primary),
        rgba(61, 172, 226, .22)
    );

    -webkit-background-clip: text;
    background-clip: text;

    user-select: none;

    text-shadow:
        0 20px 50px rgba(61, 172, 226, .10);
}


/* =========================================================
   HEADING
========================================================= */

.error-heading {
    max-width: 720px;

    margin: 22px auto 15px;

    color: var(--ink);

    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -1.3px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.error-sub {
    max-width: 620px;

    margin: 0 auto;

    color: #64748b;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   BUTTONS
========================================================= */

.error-cta-row {
    margin-top: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    flex-wrap: wrap;
}


/* Primary */
.error-cta-row .btn-brand {
    min-height: 50px;

    padding: 13px 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--primary);

    border: 1px solid var(--primary);

    border-radius: 12px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 10px 25px rgba(61, 172, 226, .20);

    transition: .3s ease;
}

.error-cta-row .btn-brand:hover {
    background: #2797cf;

    border-color: #2797cf;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 15px 32px rgba(61, 172, 226, .28);
}


/* Secondary */
.error-cta-row .btn-outline-brand {
    min-height: 50px;

    padding: 13px 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 12px;

    color: var(--ink);

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition: .3s ease;
}

.error-cta-row .btn-outline-brand:hover {
    background: #f3fbfe;

    border-color: var(--primary);

    color: var(--primary);

    transform: translateY(-2px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .error-page {
        min-height: auto;

        padding: 130px 0 90px;
    }

    .error-code {
        font-size: 135px;

        letter-spacing: -7px;
    }

    .error-heading {
        font-size: 32px;

        letter-spacing: -.8px;
    }

    .error-sub {
        font-size: 14px;

        line-height: 1.75;
    }

    .error-cta-row {
        flex-direction: column;

        width: 100%;
    }

    .error-cta-row .btn {
        width: 100%;
    }
}


@media (max-width: 480px) {

    .error-page {
        padding-top: 115px;
    }

    .error-code {
        font-size: 105px;

        letter-spacing: -5px;
    }

    .error-heading {
        font-size: 29px;
    }

    .error-eyebrow {
        font-size: 9px;

        letter-spacing: 1.4px;
    }

    .error-eyebrow::before,
    .error-eyebrow::after {
        width: 15px;
    }
}

/* =========================================================
   DIGIMANIC — THANK YOU PAGE
   (was missing entirely — thankyou.php was unstyled without this)
========================================================= */

.ty-page {
    position: relative;
    min-height: 680px;
    padding: 155px 0 100px;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 20%, rgba(61,172,226,.09), transparent 30%),
        radial-gradient(circle at 90% 75%, rgba(61,172,226,.08), transparent 30%),
        #ffffff;
}

.ty-page .ty-shape {
    position: absolute;
    display: block;
    border-radius: 50%;
    border: 1px solid rgba(61,172,226,.14);
    background: rgba(61,172,226,.025);
    pointer-events: none;
}

.ty-hero {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    z-index: 2;
}

.ty-success {
    width: 74px;
    height: 74px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(61,172,226,.12);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    box-shadow: 0 0 0 8px rgba(61,172,226,.06);
}

.ty-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 8px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ty-heading {
    margin: 12px 0 15px;
    color: var(--ink);
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1px;
}

.ty-accent { color: var(--primary); }

.ty-sub {
    max-width: 560px;
    margin: 0 auto;
    color: #64748b;
    font-size: 16px;
    line-height: 1.8;
}

.ty-cta-row {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    flex-wrap: wrap;
}

.ty-countdown {
    margin-top: 26px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 13px;
}

.ty-countdown-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(61,172,226,.12);
    color: var(--primary);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.ty-steps-section { padding: 80px 0 100px; background: var(--bg-soft); }

.ty-steps-title { text-align: center; max-width: 560px; margin: 0 auto 44px; }

.ty-steps-eyebrow {
    display: block;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ty-steps-title h2 { font-size: 1.9rem; color: var(--ink); }

.ty-step {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.8rem;
    height: 100%;
    text-align: center;
    transition: .3s ease;
}
.ty-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--primary); }

.ty-step-idx {
    display: block;
    font-size: .78rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: .06em;
    margin-bottom: .6rem;
}

.ty-step-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto .9rem;
    border-radius: 12px;
    background: var(--primary-tint);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.ty-step h3 { font-size: 1.05rem; color: var(--ink); margin-bottom: .4rem; }
.ty-step p { color: var(--muted); font-size: .9rem; margin-bottom: 0; }

@media (max-width: 768px) {
    .ty-page { padding: 130px 0 80px; }
    .ty-heading { font-size: 28px; letter-spacing: -.6px; }
    .ty-cta-row { flex-direction: column; width: 100%; }
    .ty-cta-row .btn { width: 100%; }
}

.footer-policy-link {
    color: #c6cedd;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-policy-link:hover {
    color: #3dace2;
}
.section-50.privacy-policy-section {
  padding: 90px 0;
  background: #f7fafc;
  color: #45566b;
  font-family: 'Plus Jakarta Sans', sans-serif;
  position: relative;
  overflow: hidden;
}
.section-50.privacy-policy-section::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(61,172,226,0.12) 0%, rgba(61,172,226,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}
.privacy-policy-section .container {
  position: relative;
  z-index: 1;
}
.privacy-policy-section .policy-badge {
  display: inline-block;
  padding: 6px 18px;
  background: rgba(61,172,226,0.1);
  color: #3dace2;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.privacy-policy-section .policy-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 2.6rem;
  color: #16232f;
  margin-bottom: 12px;
}
.privacy-policy-section .policy-subtitle {
  color: #66788d;
  font-size: 1rem;
}
.privacy-policy-section .policy-subtitle a {
  color: #3dace2;
  font-weight: 600;
  text-decoration: none;
}
.privacy-policy-section .policy-subtitle a:hover {
  text-decoration: underline;
}
.privacy-policy-section .policy-block {
  margin-bottom: 24px;
  padding: 28px 32px;
  background: #ffffff;
  border: 1px solid #e6edf3;
  border-left: 4px solid #3dace2;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(16, 42, 67, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.privacy-policy-section .policy-block:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(16, 42, 67, 0.1);
}
.privacy-policy-section .policy-block h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: #16232f;
  font-size: 1.25rem;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.privacy-policy-section .policy-block h3::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3dace2;
  flex-shrink: 0;
}
.privacy-policy-section .policy-block p {
  color: #5c6c7d;
  line-height: 1.8;
  font-size: 0.98rem;
  margin: 0;
}