/* ============================================================
   VOLT CODE — DESIGN SYSTEM
   Web design & development agency — dark navy palette,
   spark-amber accent, meter/readout UI for stats and results
============================================================ */

:root{
    /* Colors */
    --bg:#0A0D14;
    --bg-soft:#0F1420;
    --surface:#141A28;
    --surface-2:#1B2334;
    --border:rgba(255,255,255,.08);
    --border-strong:rgba(255,255,255,.16);

    --primary:#2F6FED;
    --primary-dim:#1E4FB8;
    --spark:#FFC530;
    --success:#10B981;

    --text:#EAF0FF;
    --text-dim:#9AA5BD;
    --text-faint:#5C6883;

    /* Typography */
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;

    /* Layout */
    --radius:20px;
    --radius-sm:10px;
    --radius-lg:26px;
    --shadow-card:0 20px 45px rgba(0,0,0,.35);
    --container:1200px;
    --ease:cubic-bezier(.16,.84,.44,1);
}

[data-theme="light"]{
    --bg:#F7F8FC;
    --bg-soft:#FFFFFF;
    --surface:#FFFFFF;
    --surface-2:#F0F2F9;
    --border:rgba(10,13,20,.08);
    --border-strong:rgba(10,13,20,.14);
    --text:#0B1220;
    --text-dim:#4B5468;
    --text-faint:#8A93A8;
    --shadow-card:0 20px 45px rgba(15,23,42,.08);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    overflow-x:hidden;
    transition:background .4s var(--ease), color .4s var(--ease);
}

img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea,select{ font-family:inherit; }

.container{
    width:100%;
    max-width:var(--container);
    margin:0 auto;
    padding:0 32px;
    position:relative;
}

h1,h2,h3,h4{
    font-family:var(--font-display);
    font-weight:600;
    line-height:1.15;
    letter-spacing:-.01em;
}

h1{ font-size:clamp(2.4rem, 4.4vw, 3.8rem); }
h2{ font-size:clamp(1.9rem, 3.2vw, 2.6rem); }
h3{ font-size:1.25rem; }

p{ color:var(--text-dim); }

.text-gradient{
    background:linear-gradient(100deg, var(--primary), var(--spark));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

::selection{ background:var(--primary); color:#fff; }

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

/* ============================================================
   BUTTONS
============================================================ */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:15px 28px;
    border-radius:999px;
    font-weight:600;
    font-size:.95rem;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
    white-space:nowrap;
}
.btn-arrow{ transition:transform .25s var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(3px); }

.btn-primary{
    background:linear-gradient(100deg, var(--primary), #FFC530);
    color:#fff;
    box-shadow:0 12px 30px rgba(47,111,237,.35);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 36px #FFC530; }

.btn-outline{
    background:transparent;
    color:var(--text);
    border:1px solid var(--border-strong);
}
.btn-outline:hover{ background:var(--surface-2); transform:translateY(-2px); }

.btn-sm{ padding:10px 20px; font-size:.85rem; }
.btn-block{ width:100%; }

/* ============================================================
   LOADER
============================================================ */
.loader{
    position:fixed; inset:0; z-index:999;
    background:var(--bg);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
    transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.hide{ opacity:0; visibility:hidden; }
.loader-mark{ display:flex; align-items:center; gap:10px; }
.loader-bolt{ font-size:1.6rem; color:var(--spark); animation:pulse 1.2s ease-in-out infinite; }
.loader-text{ font-family:var(--font-display); font-weight:700; letter-spacing:.06em; font-size:1.3rem; }
.loader-text span{ color:var(--primary); }
.loader-trace{
    width:180px; height:2px; background:var(--border); border-radius:2px; overflow:hidden; position:relative;
}
.loader-trace span{
    position:absolute; top:0; left:-40%; width:40%; height:100%;
    background:linear-gradient(90deg, transparent, var(--spark), transparent);
    animation:trace-run 1.1s ease-in-out infinite;
}
@keyframes trace-run{ to{ left:100%; } }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ============================================================
   NAVIGATION
============================================================ */
.nav-wrap{
    position:fixed; top:0; left:0; width:100%; z-index:100;
    padding:18px 0;
    transition:background .3s var(--ease), padding .3s var(--ease), box-shadow .3s var(--ease);
}
.nav-wrap.scrolled{
    background:rgba(10,13,20,.75);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    padding:12px 0;
    box-shadow:0 1px 0 var(--border);
}
[data-theme="light"] .nav-wrap.scrolled{ background:rgba(255,255,255,.75); }

.nav{ display:flex; align-items:center; justify-content:space-between; }

.logo{ display:flex; align-items:center; gap:8px; }
.logo-bolt{ color:var(--spark); font-size:1.2rem; }
.logo-text{
    font-family:var(--font-display); font-weight:700; letter-spacing:.04em; font-size:1.1rem;
}
.logo-text span{ color:var(--primary); }

.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
    font-size:.92rem; font-weight:500; color:var(--text-dim);
    position:relative; padding:4px 0;
    transition:color .25s var(--ease);
}
.nav-links a::after{
    content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
    background:var(--spark); transition:width .25s var(--ease);
}
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ width:100%; }

.nav-actions{ display:flex; align-items:center; gap:14px; }

.theme-toggle{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--border-strong);
    display:flex; align-items:center; justify-content:center; font-size:1rem;
    transition:background .25s var(--ease), transform .4s var(--ease);
}
.theme-toggle:hover{ background:var(--surface-2); }
.theme-toggle.spin{ transform:rotate(180deg); }

.nav-burger{
    display:none; flex-direction:column; gap:5px; width:30px; height:22px; justify-content:center;
}
.nav-burger span{
    display:block; width:100%; height:2px; background:var(--text); border-radius:2px;
    transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-burger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger.active span:nth-child(2){ opacity:0; }
.nav-burger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
============================================================ */
.hero{
    padding:170px 0 110px;
    position:relative;
    z-index:1;
}
.hero-container{
    display:grid;
    grid-template-columns:1.05fr 1fr;
    align-items:center;
    gap:60px;
}
 
.hero-tag{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 16px;
    background:var(--surface); border:1px solid var(--border);
    color:var(--text-dim);
    font-size:.82rem; font-weight:600;
    border-radius:999px;
    margin-bottom:26px;
}
.tag-dot{ width:7px; height:7px; border-radius:50%; background:var(--spark); box-shadow:0 0 8px var(--spark); }
 
.hero h1{ margin-bottom:22px; }
 
.hero p{ font-size:1.1rem; max-width:520px; margin-bottom:34px; }
 
.hero-buttons{ display:flex; gap:16px; margin-bottom:34px; flex-wrap:wrap; }
 
/* Hero right visual — 3D tilt browser mockup */
.hero-visual{
    position:relative; display:flex; align-items:center; justify-content:center;
    perspective:1400px;
}
.visual-glow{
    position:absolute; width:440px; height:440px;
    background:radial-gradient(circle, rgba(47,111,237,.35), transparent 70%);
    filter:blur(40px);
    z-index:0;
}
 
.tilt-stage{
    position:relative;
    width:100%; max-width:460px;
    transform-style:preserve-3d;
    transform:rotateY(-12deg) rotateX(7deg);
    transition:transform .5s cubic-bezier(.16,.84,.44,1);
}
.tilt-stage.tracking{ transition:transform .08s linear; }
 
.browser-mock{
    position:relative; z-index:2;
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:0 45px 90px rgba(0,0,0,.5);
    transform:translateZ(20px);
}
.browser-bar{
    display:flex; align-items:center; gap:8px;
    padding:14px 18px;
    background:var(--surface-2);
    border-bottom:1px solid var(--border);
}
.browser-bar .dot{ width:10px; height:10px; border-radius:50%; }
.browser-bar .dot-red{ background:#FF5F57; }
.browser-bar .dot-yellow{ background:#FFBD2E; }
.browser-bar .dot-green{ background:#28C840; }
.browser-url{
    margin-left:10px; flex:1; max-width:170px;
    font-family:var(--font-mono); font-size:.72rem; color:var(--text-faint);
    background:var(--surface); padding:5px 12px; border-radius:6px;
}
 
.browser-screen{
    padding:30px 26px;
    background:linear-gradient(160deg, var(--surface), var(--surface-2));
    min-height:280px;
}
.screen-nav{
    display:flex; align-items:center; gap:22px; margin-bottom:32px;
    padding-bottom:18px; border-bottom:1px solid var(--border);
}
.screen-logo-text{
    font-family:var(--font-display); font-weight:700; font-size:.92rem;
    color:var(--text); letter-spacing:.01em; margin-right:4px;
}
.screen-link{
    font-family:var(--font-body); font-size:.76rem; font-weight:500;
    color:var(--text-faint); white-space:nowrap;
}
.screen-link.short{
    margin-left:auto; color:#fff; background:var(--primary);
    padding:6px 14px; border-radius:999px; font-weight:600;
}
 
.screen-hero{ margin-bottom:28px; }
.screen-heading{
    font-family:var(--font-display); font-size:1.2rem; font-weight:600;
    line-height:1.3; color:var(--text); margin-bottom:8px;
}
.screen-subtext{
    font-size:.82rem; color:var(--text-dim); margin-bottom:16px; max-width:85%;
}
.screen-cta{
    display:inline-block; padding:10px 20px; border-radius:999px;
    background:linear-gradient(90deg, var(--primary), var(--spark));
    color:#fff; font-size:.8rem; font-weight:600;
}
 
.screen-cards{ display:flex; gap:12px; }
.screen-card{
    flex:1; padding:16px 12px; border-radius:10px;
    background:var(--surface-2); border:1px solid var(--border);
    display:flex; flex-direction:column; align-items:flex-start; gap:8px;
}
.screen-card-icon{
    width:30px; height:30px; border-radius:8px;
    background:var(--surface); color:var(--primary);
    display:flex; align-items:center; justify-content:center;
    font-size:.95rem;
}
.screen-card-label{ font-size:.72rem; font-weight:600; color:var(--text-dim); }
 
/* Floating chips popping forward in 3D space */
.float-chip{
    position:absolute; z-index:3;
    width:52px; height:52px; border-radius:16px;
    background:var(--surface); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-weight:700; font-size:1rem;
    box-shadow:0 20px 45px rgba(0,0,0,.4);
    transform:translateZ(60px);
    animation:float 5s ease-in-out infinite;
}
.chip-code{ top:-8%; left:-8%; color:var(--primary); }
.chip-check{ bottom:16%; left:-10%; color:var(--success); font-size:1.2rem; animation-delay:1.1s; }
 
.float-badge{
    position:absolute; z-index:3;
    bottom:-8%; right:-6%;
    display:flex; align-items:center; gap:8px;
    background:var(--surface); border:1px solid var(--border);
    padding:10px 18px; border-radius:999px;
    font-size:.78rem; font-weight:600;
    box-shadow:0 20px 45px rgba(0,0,0,.4);
    transform:translateZ(80px);
    animation:float 5s ease-in-out infinite;
    animation-delay:.6s;
}
.badge-dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--success); box-shadow:0 0 8px var(--success);
    animation:pulse 1.4s ease-in-out infinite;
}
 
@keyframes float{
    0%,100%{ transform:translateZ(60px) translateY(0); }
    50%{ transform:translateZ(60px) translateY(-14px); }
}
 
/* ============================================================
   TRUST STRIP
============================================================ */
.trust{ padding:40px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); position:relative; z-index:1; }
.trust-label{ text-align:center; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); margin-bottom:22px; }
.trust-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:36px; }
.trust-row span{ font-family:var(--font-mono); font-size:.85rem; color:var(--text-dim); }

/* ============================================================
   ABOUT
============================================================ */
.about{ padding:90px 0; position:relative; z-index:1; }
.about-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.about-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow-card);
    padding:34px 28px;
    transition:transform .3s var(--ease);
}
.about-card:hover{ transform:translateY(-6px); color: #FFC530; }
.about-icon{
    width:48px; height:48px; border-radius:12px;
    background:var(--surface-2);
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; margin-bottom:20px;
}
.about-card h3{ margin-bottom:10px; }
.about-card p{ font-size:.92rem; }
.about-values{ display:flex; flex-direction:column; gap:12px; }
.about-values li{ font-size:.9rem; color:var(--text-dim); }
.about-values strong{ color:var(--text); }
 
/* ============================================================
   SECTION HEAD (shared)
============================================================ */
.section-head{ max-width:640px; margin-bottom:56px; }
.faq-container .section-head{ margin:0 auto 56px; text-align:center; }
.faq-container .section-head p{ margin:0 auto; }
.eyebrow{
    display:inline-block; font-family:var(--font-mono); font-size:.78rem;
    letter-spacing:.1em; text-transform:uppercase; color:var(--spark); margin-bottom:14px;
}
.section-head h2{ margin-bottom:14px; }
/* ============================================================
   SECTION HEAD (shared)
============================================================ */
.section-head{ max-width:640px; margin-bottom:56px; }
.faq-container .section-head{ margin:0 auto 56px; text-align:center; }
.faq-container .section-head p{ margin:0 auto; }
.eyebrow{
    display:inline-block; font-family:var(--font-mono); font-size:.78rem;
    letter-spacing:.1em; text-transform:uppercase; color:var(--spark); margin-bottom:14px;
}
.section-head h2{ margin-bottom:14px; }

/* ============================================================
   SERVICES
============================================================ */
.services{ padding:90px 0; position:relative; z-index:1; }
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.service-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow-card);
    padding:34px 28px;
    transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.service-card:hover{ transform:translateY(-6px); border-color:var(--primary); box-shadow:0 26px 55px rgba(0,0,0,.4); }
.service-icon{
    width:48px; height:48px; border-radius:12px;
    background:var(--surface-2); color:var(--primary);
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; margin-bottom:20px;
}
.service-card h3{ margin-bottom:10px; }
.service-card p{ font-size:.92rem; }

/* ============================================================
   PROCESS
============================================================ */
.process{ padding:90px 0; position:relative; z-index:1; }
.process-line{
    display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
    position:relative;
}
.process-line::before{
    content:""; position:absolute; top:14px; left:6%; right:6%; height:1px;
    background:repeating-linear-gradient(90deg, var(--border-strong) 0 8px, transparent 8px 16px);
}
.process-step{ position:relative; padding-top:20px; }
.step-index{
    display:inline-block; font-family:var(--font-mono); font-size:.85rem;
    color:var(--bg); background:var(--spark);
    width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:18px; font-weight:700; position:relative; z-index:1;
}
.process-step h3{ margin-bottom:8px; }
.process-step p{ font-size:.9rem; }

/* ============================================================
   PORTFOLIO
============================================================ */
.portfolio{ padding:90px 0; position:relative; z-index:1; }
.portfolio-filters{ display:flex; gap:12px; margin-bottom:36px; flex-wrap:wrap; }
.filter-btn{
    padding:9px 20px; border-radius:999px; border:1px solid var(--border-strong);
    font-size:.85rem; font-weight:600; color:var(--text-dim);
    transition:all .25s var(--ease);
}
.filter-btn:hover{ color:var(--text); }
.filter-btn.active{ background:var(--primary); border-color:var(--primary); color:#fff; }

.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.portfolio-card{
    border-radius:var(--radius); overflow:hidden; border:1px solid var(--border);
    background:var(--surface);
    transition:transform .35s var(--ease), opacity .3s var(--ease);
}
.portfolio-card:hover{ transform:translateY(-6px); }
.portfolio-card.filtered-out{ display:none; }
.portfolio-thumb{ height:200px; position:relative; overflow:hidden; }
.portfolio-thumb::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(47,111,237,.4), rgba(255,197,48,.25));
}
.ph-1{ background:linear-gradient(135deg,#1B2334,#2F6FED33); }
.ph-2{ background:linear-gradient(135deg,#141A28,#FFC53022); }
.ph-3{ background:linear-gradient(135deg,#1B2334,#10B98122); }
.ph-4{ background:linear-gradient(135deg,#141A28,#2F6FED22); }
.ph-5{ background:linear-gradient(135deg,#1B2334,#FFC53033); }
.ph-6{ background:linear-gradient(135deg,#141A28,#10B98133); }
.portfolio-info{ padding:20px 22px; }
.portfolio-info span{ font-family:var(--font-mono); font-size:.72rem; color:var(--spark); text-transform:uppercase; letter-spacing:.06em; }
.portfolio-info h3{ margin-top:6px; font-size:1.1rem; }

/* ============================================================
   TECH MARQUEE
============================================================ */
.tech{ padding:90px 0; position:relative; z-index:1; overflow:hidden; }
.tech-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.tech-track{ display:flex; gap:56px; width:max-content; animation:marquee 22s linear infinite; }
.tech-track span{ font-family:var(--font-display); font-size:1.6rem; font-weight:600; color:var(--text-faint); white-space:nowrap; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ==========================================================
   TESTIMONIALS
==========================================================*/

.testimonials{
    padding:100px 0;
    position:relative;}
.testimonial-slider{
    overflow:hidden;
    width:100%;
}
.testimonial-track{
    display:flex;
    transition:transform .8s cubic-bezier(.22,1,.36,1);
}

.testimonial-page{
    min-width:100%;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
}

.testimonial-page.single{
    grid-template-columns:1fr;
    max-width:50%;
}

/* Card */

.testimonial-card{

    background:#fff;
    border:1px solid #E6E8EF;
    border-radius:24px;

    padding:36px;

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

    box-shadow:
    0 8px 30px rgba(20,30,55,.05);

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    min-height:280px;
}

.testimonial-card:hover{

    transform:translateY(-8px);

    border-color:#C9D3FF;

    box-shadow:
    0 18px 45px rgba(50,70,120,.12);

}

/* Stars */

.stars{

    color:#FFC83D;

    font-size:18px;

    margin-bottom:22px;

    letter-spacing:3px;

}

/* Review */

.testimonial-card p{

    color:#596273;

    font-size:16px;

    line-height:1.8;

    margin-bottom:34px;

}

/* Author */

.testimonial-author{

    display:flex;

    align-items:center;

    gap:14px;

}

.avatar{

    width:52px;

    height:52px;

    border-radius:16px;

    background:#F4F7FF;

    color:#3461FF;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

}

.testimonial-card:hover .avatar{

    transform:rotate(-6deg) scale(1.08);

    background:#3461FF;

    color:#fff;

}

.testimonial-author h4{

    font-size:17px;

    color:#18212F;

    margin-bottom:4px;

}

.testimonial-author span{

    color:#8C93A3;

    font-size:14px;

}

/* Dots */

.testimonial-dots{

    display:flex;

    justify-content:center;

    margin-top:40px;

    gap:12px;

}

.dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#D7DCE7;

    cursor:pointer;

    transition:.35s;

}

.dot.active{

    width:28px;

    border-radius:50px;

    background:#3461FF;

}
/* ============================================================
   PRICING
============================================================ */
.pricing{ padding:90px 0; position:relative; z-index:1; }
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.price-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:38px 32px; display:flex; flex-direction:column; position:relative;
    transition:transform .3s var(--ease);
}
.price-card:hover{ transform:translateY(-6px); }
.price-card.featured{ border-color:var(--primary); background:var(--surface-2); }
.price-badge{
    position:absolute; top:-13px; left:32px;
    background:var(--primary); color:#fff; font-size:.72rem; font-weight:700;
    padding:5px 14px; border-radius:999px;
}
.price-desc{ font-size:.88rem; margin:10px 0 22px; }
.price-amount{ font-family:var(--font-display); font-size:2.1rem; font-weight:700; margin-bottom:24px; }
.price-amount span{ font-family:var(--font-body); font-size:.85rem; font-weight:500; color:var(--text-faint); }
.price-features{ display:flex; flex-direction:column; gap:12px; margin-bottom:30px; flex:1; }
.price-features li{ font-size:.88rem; color:var(--text-dim); padding-left:22px; position:relative; }
.price-features li::before{ content:"⚡"; position:absolute; left:0; color:var(--spark); font-size:.8rem; }

/* ============================================================
   FAQ
============================================================ */
.faq{ padding:90px 0; position:relative; z-index:1; }
.faq-container{ max-width:820px; }
.faq-list{ display:flex; flex-direction:column; gap:14px; }
.faq-item{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.faq-question{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:22px 26px; text-align:left; font-family:var(--font-display); font-weight:600; font-size:1rem;
}
.faq-icon{ font-size:1.3rem; color:var(--spark); transition:transform .3s var(--ease); flex-shrink:0; margin-left:16px; }
.faq-item.open .faq-icon{ transform:rotate(45deg); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-answer p{ padding:0 26px 22px; font-size:.92rem; }

/* ============================================================
   CONTACT
============================================================ */
.contact{ padding:90px 0; position:relative; z-index:1; }
.contact-container{ display:grid; grid-template-columns:1fr 1.2fr; gap:60px; }
.contact-info p{ margin:14px 0 30px; max-width:420px; }
.contact-details{ display:flex; flex-direction:column; gap:20px; }
.contact-details li{ display:flex; flex-direction:column; gap:4px; }
.contact-details strong{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }
.contact-details span{ font-size:.98rem; }
 
.contact-form{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
    padding:36px;
}
.form-title{ font-size:1.15rem; margin-bottom:8px; }
.form-subtitle{ font-size:.88rem; margin-bottom:26px; }
 
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group{ margin-bottom:20px; }
.form-group label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:8px; color:var(--text-dim); }
.form-group input, .form-group textarea, .form-group select{
    width:100%; padding:13px 16px; border-radius:10px;
    background:var(--surface-2); border:1px solid var(--border);
    color:var(--text); font-size:.92rem;
    transition:border-color .25s var(--ease);
}
.form-group select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239AA5BD' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    padding-right:42px;
    cursor:pointer;
}
.form-group select option{ background:var(--surface-2); color:var(--text); }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{
    border-color:var(--primary); outline:none;
}
.form-group.error input, .form-group.error textarea, .form-group.error select{ border-color:#EF4444; }
.form-error{ display:block; font-size:.76rem; color:#EF4444; margin-top:6px; min-height:1em; }
.form-success{
    display:none; text-align:center; margin-top:16px; font-size:.88rem; color:var(--success);
}
.form-success.show{ display:block; }
/* ============================================================
   FOOTER
============================================================ */
.footer{ border-top:1px solid var(--border); padding:70px 0 30px; position:relative; z-index:1; }
.footer-grid{ display:grid; grid-template-columns:1.4fr .8fr .8fr 1.2fr; gap:40px; margin-bottom:50px; }
.footer-brand p{ margin-top:16px; font-size:.88rem; max-width:320px; }
.footer-col h4{ font-size:.9rem; margin-bottom:18px; }
.footer-col a{ display:block; font-size:.88rem; color:var(--text-dim); margin-bottom:12px; transition:color .25s var(--ease); }
.footer-col a:hover{ color:var(--text); }
.footer-social p{ font-size:.85rem; margin:10px 0 18px; }
.social-icons{ display:flex; gap:12px; }
.social-icon{
    display:flex !important; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%;
    background:var(--surface-2); border:1px solid var(--border);
    color:var(--text-dim);
    margin-bottom:0 !important;
    transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.social-icon i{ font-size:16px; line-height:1; }
.social-icon:hover{ background:var(--primary); color:#fff; transform:translateY(-3px); }
 
.footer-bottom{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:26px; border-top:1px solid var(--border);
    font-size:.82rem; color:var(--text-faint);
}
.scroll-progress-label{ font-family:var(--font-mono); }
 
/* Scroll progress bar (top) */
.scroll-progress{
    position:fixed; top:0; left:0; height:3px; width:0%;
    background:linear-gradient(90deg, var(--primary), var(--spark));
    z-index:200; transition:width .1s linear;
}
 
/* WhatsApp floating button — always visible */
.whatsapp-float{
    position:fixed; bottom:28px; right:28px; z-index:91;
    width:56px; height:56px; border-radius:50%;
    background:linear-gradient(145deg, #2CE065, #1EBE57);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 12px 28px rgba(30,190,87,.45), inset 0 1px 1px rgba(255,255,255,.25);
    transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.whatsapp-icon{ font-size:24px; line-height:1; position:relative; z-index:2; }
 
/* Expanding ring — a real pulse, not a shadow flicker */
.whatsapp-ring{
    position:absolute; inset:0; border-radius:50%;
    border:2px solid rgba(37,211,102,.55);
    animation:whatsapp-ring 2.2s ease-out infinite;
    pointer-events:none;
}
@keyframes whatsapp-ring{
    0%{ transform:scale(1); opacity:.7; }
    100%{ transform:scale(1.7); opacity:0; }
}
 
.whatsapp-float:hover{
    transform:translateY(-4px) scale(1.06);
    box-shadow:0 18px 36px rgba(30,190,87,.55), inset 0 1px 1px rgba(255,255,255,.3);
}
 
/* Tooltip */
.whatsapp-tooltip{
    position:absolute; right:calc(100% + 14px); top:50%;
    transform:translateY(-50%) translateX(6px);
    background:var(--surface); color:var(--text);
    border:1px solid var(--border);
    padding:8px 14px; border-radius:8px;
    font-size:.82rem; font-weight:500; white-space:nowrap;
    box-shadow:0 12px 28px rgba(0,0,0,.3);
    opacity:0; visibility:hidden;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    pointer-events:none;
}
.whatsapp-tooltip::after{
    content:""; position:absolute; top:50%; left:100%;
    transform:translateY(-50%);
    border:6px solid transparent; border-left-color:var(--surface);
}
.whatsapp-float:hover .whatsapp-tooltip{
    opacity:1; visibility:visible; transform:translateY(-50%) translateX(0);
}
 
@media (prefers-reduced-motion: reduce){
    .whatsapp-ring{ animation:none; opacity:0; }
}
 
/* ===========================
   Terms & Conditions Dialog
=========================== */

dialog#termsDialog {
    /* make dialog responsive and centered */
    width: 100%;
    max-width: 720px; 
    margin: 20px auto; 
    border: none;
    border-radius: 14px;
    padding: 0;
    background: linear-gradient(180deg, #0f1724 0%, #151b2d 100%);
    color: #fff;
    box-shadow: 0 30px 90px rgba(2,6,23,.6), inset 0 1px 0 rgba(255,255,255,.02);
    overflow: hidden;
    animation: dialogOpen .35s cubic-bezier(.2,.9,.3,1);
}

/* Backdrop */
dialog#termsDialog::backdrop {
    background: linear-gradient(180deg, rgba(2,6,23,.6), rgba(2,6,23,.85));
    backdrop-filter: blur(6px) saturate(.95);
    -webkit-backdrop-filter: blur(6px) saturate(.95);
}

/* Inner Content */
#termsDialog .p-6{
    padding:32px 36px;
}

/* Heading */
#termsDialog h3{
    font-size:26px;
    font-weight:800;
    margin:0 0 18px;
    color:#FFC530;
    text-align:center;
    letter-spacing: -0.2px;
}

/* Ordered List */
#termsDialog ol{
    padding-left:20px;
    margin:0;
    max-height:56vh;
    overflow-y:auto;
    padding-right:8px; /* avoid touching edge when scrollbar visible */
}

/* List Items */
#termsDialog ol li{
    margin-bottom:14px;
    line-height:1.8;
    color:#d1d5db;
    font-size:15px;
}

/* Scrollbar */
#termsDialog ol::-webkit-scrollbar{
    width:8px;
}

#termsDialog ol::-webkit-scrollbar-track{
    background:linear-gradient(180deg,#0f1724,#111827);
    border-radius:20px;
}

#termsDialog ol::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#60a5fa,#06b6d4);
    border-radius:20px;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.12);
}

/* Footer */
#termsDialog .mt-6{
    margin-top:28px;
}

/* Close Button */
#closeTerms{
    padding:12px 28px;
    border:none;
    border-radius:10px;
    background:#FFC530;
    color:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition: transform .25s ease, box-shadow .25s ease, opacity .2s ease;
}

#closeTerms:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(37,99,235,.22);
}

#closeTerms:active{
    transform:translateY(0) scale(.985);
    opacity:.95;
}

/* Animation */
@keyframes dialogOpen{
    from{
        opacity:0;
        transform:translateY(-18px) scale(.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* Responsive */
@media (max-width:768px){

    dialog#termsDialog{
        width:94%;
        margin:12px auto;
        border-radius:12px;
    }

    #termsDialog .p-6{
        padding:18px 18px;
    }

    #termsDialog h3{
        font-size:20px;
    }

    #termsDialog ol li{
        font-size:14px;
        line-height:1.65;
    }

    #closeTerms{
        width:100%;
        display:block;
    }
}
/* open/close state handling */
dialog#termsDialog {
    opacity: 0;
    transform: scale(.98);
    transition: opacity .25s ease, transform .25s ease;
}

dialog#termsDialog[open] {
    opacity: 1;
    transform: scale(1);
}

dialog#termsDialog.closing {
    opacity: 0;
    transform: scale(.97);
}