/* =============================================================
   VIPRAMIND TECHNOLOGIES — STYLESHEET
   =============================================================
   TABLE OF CONTENTS
   1.  Design Tokens (colors, fonts, spacing, easing)
   2.  Global Resets & Base Styles
   3.  Utility Classes (.container, .glass, .btn, .eyebrow, etc.)
   4.  Header & Navigation
   5.  Hero Section
   6.  Trust Strip & Stats Bar
   7.  Services (Bento Grid)
   8.  Industries
   9.  Why Choose Us
   10. Featured Products
   11. Testimonials
   12. Tech Stack Marquee
   13. Process Steps
   14. Blog Cards
   15. FAQ Accordion
   16. CTA Band
   17. Footer
   18. Scroll Reveal Animation
   19. Contact Form
   20. Contact Info Cards (icons + headings)

   HOW TO CUSTOMIZE:
   - Colors, fonts, and spacing all flow from the CSS variables
     in the ":root" block (Section 1). Change a value there and
     it updates everywhere it's used.
   - Each section below is self-contained and labeled — find the
     section you want to edit using the table of contents above.

   RELATED STYLESHEETS:
   - assets/css/blog.css extends this file for the /blog.html
     listing page and every /blog/*.html article page. It is
     loaded AFTER this file and consumes the tokens defined in
     Section 1 (colors, fonts, radii) plus the .glass, .chip,
     .avatar, .btn, .newsletter and .cta-band components below —
     it does not redefine any of them. Change a token here and
     the blog inherits it automatically; no value should ever
     need to be edited in both places.
   ============================================================= */

/* =============================================================
   1. DESIGN TOKENS
   ============================================================= */
:root{
  /* Backgrounds */
  --bg:#060812;
  --bg-soft:#0A0E1F;
  --bg-elev:#0D1226;

  /* Glass / translucent surfaces */
  --glass:rgba(255,255,255,.055);
  --glass-strong:rgba(255,255,255,.09);
  --glass-border:rgba(255,255,255,.12);
  --line:rgba(255,255,255,.09);

  /* Text colors */
  --white:#FFFFFF;
  --text-mut:rgba(255,255,255,.68);
  --text-dim:rgba(255,255,255,.42);

  /* Brand / accent colors */
  --blue-1:#2F6BFF;
  --blue-2:#00C6FB;
  --violet:#7B61FF;

  /* Gradients */
  --grad-primary:linear-gradient(120deg, var(--blue-1), var(--blue-2));
  --grad-text:linear-gradient(96deg, #6E9BFF, #00E0FF 85%);
  --grad-mesh:radial-gradient(circle at 20% 20%, rgba(47,107,255,.35), transparent 55%),
              radial-gradient(circle at 80% 30%, rgba(0,198,251,.28), transparent 50%),
              radial-gradient(circle at 50% 90%, rgba(123,97,255,.24), transparent 55%);

  /* Fonts — change the family names here to re-theme the whole site */
  --font-display:'Sora', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', 'Consolas', monospace;

  /* Layout */
  --container:1280px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --r-pill:999px;
  --ease:cubic-bezier(.19,1,.22,1);
}

/* =============================================================
   2. GLOBAL RESETS & BASE STYLES
   ============================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}
body{
  margin:0;background:var(--bg);color:var(--white);
  font-family:var(--font-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.14;margin:0;letter-spacing:-0.01em;color:var(--white);}
p{margin:0;}
.container{max-width:var(--container);margin:0 auto;padding:0 32px;}
@media (max-width:640px){.container{padding:0 20px;}}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--blue-2);outline-offset:3px;border-radius:4px;
}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--blue-1);color:#fff;padding:12px 20px;z-index:999;border-radius:0 0 8px 0;font-weight:600;}
.skip-link:focus{left:0;}
.sr-only{position:absolute;left:-9999px;}

/* Ambient global mesh + grid */
.bg-mesh{position:fixed;inset:0;z-index:-2;background:var(--grad-mesh);opacity:.55;pointer-events:none;}
.bg-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(circle at 50% 0%, black, transparent 75%);
}

/* Mouse glow (micro interaction) */
.cursor-glow{
  position:fixed; width:420px;height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(47,107,255,.16), transparent 70%);
  pointer-events:none; z-index:0; transform:translate(-50%,-50%);
  left:50%; top:30%; transition:opacity .4s ease; will-change:transform;
}
@media (hover:none){ .cursor-glow{display:none;} }

/* Preloader */
.preloader{
  position:fixed;inset:0;z-index:1000;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.preloader.done{opacity:0;visibility:hidden;}
.preloader .mark{width:56px;height:56px;position:relative;}
.preloader .mark svg{width:100%;height:100%;animation:spin 1.4s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.preloader .bar{width:180px;height:3px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;}
.preloader .bar span{display:block;height:100%;width:0%;background:var(--grad-primary);border-radius:99px;animation:load 1.6s var(--ease) forwards;}
@keyframes load{to{width:100%;}}
.preloader .label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--text-dim);text-transform:uppercase;}

/* =============================================================
   3. UTILITY CLASSES
   ============================================================= */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:var(--r-lg);
}
.glass-strong{background:var(--glass-strong);}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-2);margin-bottom:16px;
}
.eyebrow::before{content:'';width:18px;height:1px;background:var(--blue-2);}

.section{padding:120px 0;position:relative;}
.section-tight{padding:88px 0;}
@media (max-width:768px){.section{padding:76px 0;}.section-tight{padding:60px 0;}}
.section-head{max-width:700px;margin-bottom:60px;}
.section-head h2{font-size:clamp(30px,3.8vw,44px);}
.section-head p{margin-top:16px;color:var(--text-mut);font-size:17px;}
.section-head.center{margin:0 auto 60px;text-align:center;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 28px;border-radius:var(--r-pill);font-weight:600;font-size:15px;
  border:1px solid transparent;transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--grad-primary);color:#04070F;box-shadow:0 0 0 0 rgba(47,107,255,0);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(47,107,255,.55);}
.btn-glass{background:var(--glass);border-color:var(--glass-border);color:var(--white);backdrop-filter:blur(16px);}
.btn-glass:hover{transform:translateY(-2px);border-color:rgba(0,198,251,.5);background:rgba(0,198,251,.08);}
.btn-sm{padding:11px 20px;font-size:13.5px;}
.btn-block{width:100%;}

/* =============================================================
   4. HEADER & NAVIGATION
   ============================================================= */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(6,8,18,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:border-color .3s, background .3s;
}
.site-header.scrolled{border-bottom-color:var(--line);background:rgba(6,8,18,.86);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0;}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:19px;}
.logo-mark{width:34px;height:34px;flex-shrink:0;}
.logo img.logo-mark{width:auto;height:160px;object-fit:contain;}
.logo small{display:block;font-family:var(--font-mono);font-weight:400;font-size:9.5px;letter-spacing:.1em;color:var(--text-dim);text-transform:uppercase;margin-top:1px;}

.nav-desktop{display:flex;align-items:center;gap:6px;}
.nav-desktop > li{position:relative;}
.nav-desktop a, .nav-desktop > li > button{
  display:flex;align-items:center;gap:5px;
  font-size:14.5px;font-weight:500;color:var(--text-mut);padding:10px 14px;border-radius:8px;
  transition:color .2s, background .2s;
}
.nav-desktop a:hover, .nav-desktop > li > button:hover{color:var(--white);background:rgba(255,255,255,.05);}
.nav-desktop > li > button svg{transition:transform .25s;}
.nav-desktop > li[data-open="true"] > button svg{transform:rotate(180deg);}

.mega{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);
  width:360px;max-width:90vw;padding:10px;
  display:flex;flex-direction:column;gap:2px;
  background:rgba(8,10,22,.98);border:1px solid var(--glass-border);border-radius:var(--r-lg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
}
.nav-desktop > li[data-open="true"] .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.mega-item{display:block;padding:12px 14px;border-radius:10px;transition:background .2s;}
.mega-item:hover{background:rgba(255,255,255,.06);}
.mega-item h4{font-size:14.5px;margin:0 0 3px;}
.mega-item p{font-size:12.5px;color:var(--text-dim);line-height:1.5;margin:0;}

.header-actions{display:flex;align-items:center;gap:12px;}
.nav-toggle{display:none;border:1px solid var(--glass-border);border-radius:10px;width:42px;height:42px;align-items:center;justify-content:center;color:var(--white);}

.nav-mobile{display:none;flex-direction:column;padding:8px 20px 26px;background:var(--bg-soft);border-bottom:1px solid var(--line);max-height:80vh;overflow-y:auto;}
.nav-mobile.open{display:flex;}
.nav-mobile > li{border-bottom:1px solid var(--line);}
.nav-mobile > li > a, .nav-mobile > li > button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px 4px;color:var(--text-mut);font-size:15px;font-weight:500;}
.nav-mobile .sub{display:none;flex-direction:column;padding:0 4px 14px 14px;gap:2px;}
.nav-mobile li[data-open="true"] .sub{display:flex;}
.nav-mobile .sub a{padding:9px 0;font-size:13.5px;color:var(--text-dim);}

@media (max-width:1080px){
  .nav-desktop{display:none;}
  .nav-toggle{display:inline-flex;}
  .header-actions .btn-glass{display:none;}
}

/* =============================================================
   5. HERO SECTION
   ============================================================= */
.hero{position:relative;padding:110px 0 90px;overflow:hidden;}
.hero-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;z-index:-1;}
.orb-1{width:520px;height:520px;background:var(--blue-1);top:-180px;right:-120px;}
.orb-2{width:380px;height:380px;background:var(--violet);bottom:-160px;left:-100px;}
.orb-3{width:300px;height:300px;background:var(--blue-2);top:40%;left:55%;opacity:.35;}

.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;}}

.hero-copy h1{font-size:clamp(38px,5.4vw,62px);max-width:640px;}
.hero-copy h1 .accent{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-copy p.lede{margin-top:22px;font-size:18px;color:var(--text-mut);max-width:560px;}
.hero-ctas{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px;}
.hero-badge{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);border:1px solid var(--glass-border);border-radius:var(--r-pill);padding:7px 14px;background:var(--glass);}

.hero-visual{position:relative;aspect-ratio:1/1;max-width:520px;margin:0 auto;}
.hero-visual .orbit-card{
  position:absolute;padding:16px 18px;display:flex;align-items:center;gap:10px;
  animation:float 6s ease-in-out infinite;
}
.hero-visual .orbit-card svg{flex-shrink:0;}
.hero-visual .orbit-card .val{font-family:var(--font-display);font-weight:700;font-size:17px;}
.hero-visual .orbit-card .cap{font-size:11px;color:var(--text-dim);}
.oc-1{top:6%;left:0;animation-delay:0s;}
.oc-2{top:38%;right:0;animation-delay:1.2s;}
.oc-3{bottom:10%;left:8%;animation-delay:2.4s;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.hero-visual .core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:220px;height:220px;border-radius:50%;
  background:var(--grad-primary);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 90px rgba(47,107,255,.5);
}
.hero-visual .core svg{width:88px;height:88px;}
.hero-visual .ring{position:absolute;top:50%;left:50%;border:1px dashed rgba(255,255,255,.14);border-radius:50%;transform:translate(-50%,-50%);animation:spin 30s linear infinite;}
.ring-1{width:340px;height:340px;}
.ring-2{width:440px;height:440px;animation-duration:46s;animation-direction:reverse;}

/* =============================================================
   6. TRUST STRIP & STATS BAR
   ============================================================= */
.trust-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:36px 0;overflow:hidden;}
.trust-strip .label{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);text-align:center;margin-bottom:24px;}
.trust-track{display:flex;gap:70px;align-items:center;animation:scroll-x 34s linear infinite;width:max-content;}
@keyframes scroll-x{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.trust-track span{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--text-dim);white-space:nowrap;}

.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:70px;}
.stat-cell{padding:32px 26px;text-align:center;}
.stat-cell .num{font-family:var(--font-display);font-size:clamp(30px,3.2vw,40px);font-weight:800;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat-cell .cap{margin-top:6px;font-size:13.5px;color:var(--text-mut);}
@media (max-width:768px){.stats-bar{grid-template-columns:repeat(2,1fr);}}

/* =============================================================
   7. SERVICES (BENTO GRID)
   ============================================================= */
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media (max-width:860px){.service-grid{grid-template-columns:1fr;}}
.service-card{padding:34px;transition:transform .35s var(--ease), border-color .35s;}
.service-card:hover{transform:translateY(-5px);border-color:rgba(0,198,251,.4);}
.service-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.service-icon{
  width:52px;height:52px;border-radius:14px;background:var(--grad-primary);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.service-num{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);}
.service-card h3{font-size:22px;margin-bottom:10px;}
.service-card p.desc{font-size:14.5px;color:var(--text-mut);margin-bottom:20px;}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;}
.chip{font-family:var(--font-mono);font-size:11.5px;color:var(--text-mut);border:1px solid var(--glass-border);background:rgba(255,255,255,.03);border-radius:var(--r-pill);padding:6px 12px;}
.chip.more{color:var(--blue-2);border-color:rgba(0,198,251,.35);}
.service-card .cap-link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--blue-2);}
.service-card .cap-link svg{transition:transform .2s;}
.service-card:hover .cap-link svg{transform:translateX(3px);}

/* =============================================================
   8. INDUSTRIES
   ============================================================= */
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:900px){.industry-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.industry-grid{grid-template-columns:1fr;}}
.industry-card{padding:26px;text-align:left;transition:transform .3s var(--ease), border-color .3s;}
.industry-card:hover{transform:translateY(-4px);border-color:rgba(123,97,255,.4);}
.industry-card svg{margin-bottom:16px;}
.industry-card h4{font-size:15.5px;margin-bottom:6px;}
.industry-card p{font-size:12.5px;color:var(--text-dim);}

/* =============================================================
   9. WHY CHOOSE US
   ============================================================= */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:900px){.why-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.why-grid{grid-template-columns:1fr;}}
.why-card{padding:28px;}
.why-card svg{margin-bottom:16px;}
.why-card h3{font-size:17.5px;margin-bottom:8px;}
.why-card p{font-size:13.5px;color:var(--text-mut);}

/* =============================================================
   10. FEATURED PRODUCTS
   ============================================================= */
.product-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:960px){.product-row{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.product-row{grid-template-columns:1fr;}}
.product-card{overflow:hidden;transition:transform .3s var(--ease), border-color .3s;}
.product-card:hover{transform:translateY(-4px);border-color:rgba(0,198,251,.4);}
.product-thumb{height:130px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);}
.product-body{padding:22px;}
.product-body .tag{font-family:var(--font-mono);font-size:11px;color:var(--blue-2);letter-spacing:.05em;text-transform:uppercase;}
.product-body h3{font-size:17px;margin:10px 0 8px;}
.product-body p{font-size:13.5px;color:var(--text-mut);}

/* =============================================================
   11. TESTIMONIALS
   ============================================================= */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:900px){.testi-grid{grid-template-columns:1fr;}}
.testi-card{padding:28px;}
.testi-card .stars{color:var(--blue-2);font-size:14px;margin-bottom:14px;letter-spacing:2px;}
.testi-card .quote{font-size:15.5px;line-height:1.65;color:var(--white);}
.testi-person{display:flex;align-items:center;gap:12px;margin-top:22px;}
.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px;color:#04070F;background:var(--grad-primary);flex-shrink:0;}
/* Size modifiers — default .avatar is 40px (testimonials); reused at other
   sizes by blog cards, the featured story, and article bylines (blog.css) */
.avatar-sm{width:26px;height:26px;font-size:10.5px;}
.avatar-md{width:34px;height:34px;font-size:12px;}
.avatar-lg{width:44px;height:44px;font-size:15px;}
.testi-person .name{font-size:14px;font-weight:600;}
.testi-person .role{font-size:12.5px;color:var(--text-dim);}

/* =============================================================
   12. TECH STACK MARQUEE
   ============================================================= */
.tech-marquee{overflow:hidden;padding:26px 0;}
.tech-track{display:flex;gap:16px;width:max-content;animation:scroll-x 26s linear infinite;}
.tech-pill{
  display:flex;align-items:center;gap:10px;padding:14px 22px;white-space:nowrap;
  font-family:var(--font-mono);font-size:13.5px;color:var(--text-mut);
}
.tech-dot{width:8px;height:8px;border-radius:50%;background:var(--grad-primary);}

/* =============================================================
   13. PROCESS STEPS
   ============================================================= */
.process-row{display:grid;grid-template-columns:repeat(5,1fr);gap:0;}
@media (max-width:900px){.process-row{grid-template-columns:1fr;gap:22px;}}
.process-step{padding:26px 20px 0 0;position:relative;}
.process-step:not(:last-child)::after{content:'';position:absolute;top:34px;right:0;width:20px;height:1px;background:var(--line);}
@media (max-width:900px){.process-step:not(:last-child)::after{display:none;}.process-step{padding-top:0;}}
.process-num{
  font-family:var(--font-mono);font-size:13px;color:var(--blue-2);
  border:1px solid rgba(0,198,251,.35);width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;background:var(--glass);
}
.process-step h3{font-size:17px;margin-bottom:8px;}
.process-step p{font-size:13.5px;color:var(--text-mut);}

/* =============================================================
   14. BLOG CARDS
   ============================================================= */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:900px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{overflow:hidden;transition:transform .3s var(--ease), border-color .3s;}
.blog-card:hover{transform:translateY(-4px);border-color:rgba(47,107,255,.4);}
.blog-thumb{height:150px;}
.blog-body{padding:22px;}
.blog-body .cat{font-family:var(--font-mono);font-size:11px;color:var(--blue-2);text-transform:uppercase;letter-spacing:.05em;}
.blog-body h3{font-size:16.5px;margin:10px 0;line-height:1.4;}
.blog-body .meta{font-size:12.5px;color:var(--text-dim);}

/* =============================================================
   15. FAQ ACCORDION
   ============================================================= */
.faq-list{max-width:840px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:24px 4px;font-size:16px;font-weight:600;text-align:left;font-family:var(--font-body);color:var(--white);}
.faq-q svg{transition:transform .3s var(--ease);flex-shrink:0;color:var(--text-dim);}
.faq-item[data-open="true"] .faq-q svg{transform:rotate(45deg);color:var(--blue-2);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);}
.faq-a p{padding:0 4px 24px;color:var(--text-mut);font-size:14.5px;max-width:700px;}

/* =============================================================
   16. CTA BAND
   ============================================================= */
.cta-band{padding:60px;display:flex;align-items:center;justify-content:space-between;gap:32px;position:relative;overflow:hidden;background:linear-gradient(120deg, rgba(47,107,255,.16), rgba(123,97,255,.1) 60%, rgba(0,198,251,.14));}
.cta-band h2{font-size:clamp(24px,3vw,32px);max-width:480px;}
.cta-band p{color:var(--text-mut);margin-top:10px;max-width:460px;}
.cta-actions{display:flex;gap:14px;flex-shrink:0;flex-wrap:wrap;}
@media (max-width:768px){.cta-band{flex-direction:column;align-items:flex-start;padding:36px 26px;}}

/* =============================================================
   17. FOOTER
   ============================================================= */
.site-footer{border-top:1px solid var(--line);padding-top:76px;position:relative;}
.footer-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px;padding-bottom:56px;}
@media (max-width:980px){.footer-top{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr;}}
.footer-brand p{color:var(--text-mut);font-size:14px;margin-top:14px;max-width:280px;}
.footer-col h4{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-bottom:18px;}
.footer-col li{margin-bottom:11px;}
.footer-col a{font-size:14px;color:var(--text-mut);transition:color .2s;}
.footer-col a:hover{color:var(--blue-2);}
.newsletter{display:flex;gap:10px;margin-top:16px;}
.newsletter input{background:var(--glass);border:1px solid var(--glass-border);border-radius:8px;padding:11px 14px;color:var(--white);font-size:13.5px;flex-grow:1;min-width:0;}
.newsletter input::placeholder{color:var(--text-dim);}
.social-row{display:flex;gap:12px;margin-top:20px;}
.social-row a{width:36px;height:36px;border:1px solid var(--glass-border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-mut);transition:border-color .2s,color .2s;}
.social-row a:hover{border-color:var(--blue-2);color:var(--blue-2);}
.footer-bottom{border-top:1px solid var(--line);padding:26px 0 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--text-dim);}
.footer-bottom .legal-links{display:flex;gap:22px;flex-wrap:wrap;}
.footer-bottom a:hover{color:var(--text-mut);}

/* =============================================================
   18. SCROLL REVEAL ANIMATION
   ============================================================= */
.reveal{opacity:0;transform:translateY(22px);}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1 !important;transform:none !important;}}

/* =============================================================
   19. CONTACT FORM
   ============================================================= */
.contact-form label{font-size:13px;color:var(--text-mut);display:block;margin-bottom:6px;}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--glass-border);border-radius:10px;
  padding:12px 14px;color:var(--white);font-size:14px;font-family:inherit;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--text-dim);}

/* =============================================================
   20. CONTACT INFO CARDS (icons + headings)
   ============================================================= */
.contact-info-list{display:flex;flex-direction:column;gap:14px;width:100%;}
.contact-info-item{
  display:flex;align-items:flex-start;gap:14px;
  padding:16px 20px;width:100%;
}
.contact-info-icon{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--grad-primary);
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.contact-info-body{min-width:0;}
.contact-info-label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue-2);margin-bottom:4px;
}
.contact-info-value{font-size:14.5px;color:var(--white);line-height:1.5;word-break:break-word;}