/* ============================================================
   CLOUD SILICA — style.css
   Azure · Violet · Deep Navy  |  Inter + Space Grotesk
   ============================================================ */
:root{
  --bg:      #030a1a;
  --bg2:     #060f24;
  --bg3:     #091530;
  --card:    #0c1a38;
  --card-h:  #102042;
  --bdr:     rgba(0,188,255,.10);
  --bdr-h:   rgba(0,188,255,.36);
  --azure:   #00bcff;
  --violet:  #8a2be2;
  --sky:     #38bdf8;
  --txt:     #d8eaf8;
  --txt2:    #8aafc8;
  --txt3:    #3a5a80;
  --grad:    linear-gradient(130deg,#00bcff 0%,#8a2be2 100%);
  --gt:      linear-gradient(90deg,#00bcff,#8a2be2);
  --shadow:  0 4px 24px rgba(0,0,0,.35);
  --shadow-h:0 10px 40px rgba(0,0,0,.55);
  --f1:      'Space Grotesk',sans-serif;
  --f2:      'Inter',sans-serif;
  --r:       12px;
  --ease:    cubic-bezier(.4,0,.2,1);
  --tr:      0.25s var(--ease);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow-x:hidden}
body{
  background:var(--bg);color:var(--txt);
  font-family:var(--f2);font-size:14px;line-height:1.6;
}
a{text-decoration:none;color:inherit}
ul{list-style:none}

/* gradient text */
.g{background:var(--gt);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* subtle grid */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(0,188,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,188,255,.025) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 80%);
}

/* ── LAYOUT ── */
.page{min-height:100vh;width:100%;display:flex;flex-direction:column;position:relative;overflow:visible}
.main{flex:1;display:flex;align-items:stretch;overflow:visible;position:relative;z-index:1;min-height:0}
.wrap{width:100%;max-width:1380px;margin:0 auto;padding:0 2.8%}

/* ── ORB GLOWS ── */
.orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(90px);z-index:0}
.o1{width:460px;height:460px;top:-160px;left:-100px;background:radial-gradient(circle,rgba(0,188,255,.09),transparent 70%)}
.o2{width:380px;height:380px;bottom:-120px;right:-40px;background:radial-gradient(circle,rgba(138,43,226,.08),transparent 70%)}

/* ══════════════════════════════════════
   NAVBAR
══════════════════════════════════════ */
.nav{
  height:78px;display:flex;align-items:center;justify-content:space-between;
  padding:0 2.8%;z-index:100;flex-shrink:0;
  background:rgba(3,10,26,.92);backdrop-filter:blur(24px);
  border-bottom:1px solid var(--bdr);
  transition:box-shadow .26s ease,border-color .26s ease;
}
.nav.scrolled{box-shadow:0 4px 36px rgba(0,0,0,.6);border-bottom-color:rgba(0,188,255,.22)}
.logo{display:flex;align-items:center;gap:12px;transition:opacity var(--tr)}
.logo:hover{opacity:.82}

/* ── Image logo ── */
.logo-img{
  height:52px;
  width:auto;
  display:block;
  filter:brightness(1.08) drop-shadow(0 1px 10px rgba(0,188,255,.22));
  transition:opacity var(--tr),filter var(--tr);
}
.logo:hover .logo-img{
  opacity:.84;
  filter:brightness(1.18) drop-shadow(0 2px 16px rgba(0,188,255,.42));
}
.logo-name{display:none}

.logo-name{font-family:var(--f1);font-size:1.42rem;font-weight:700;letter-spacing:-.02em;color:var(--txt)}
.logo-name span{background:var(--gt);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-ul{display:flex;align-items:center;gap:2px}
.nav-ul a{
  font-family:var(--f1);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#8aafc8;padding:6px 11px;border-radius:6px;
  transition:color var(--tr),background var(--tr);
}
.nav-ul a:hover,.nav-ul a.active{color:var(--azure);background:rgba(0,188,255,.07)}
.nav-cta{
  background:var(--grad)!important;color:#030a1a!important;
  -webkit-text-fill-color:#030a1a!important;
  padding:7px 20px!important;border-radius:50px!important;font-weight:700!important;
  transition:transform var(--tr),box-shadow var(--tr)!important;
}
.nav-cta:hover{transform:translateY(-2px)!important;box-shadow:0 6px 22px rgba(0,188,255,.35)!important}
.nav-cta.active{color:#030a1a!important;-webkit-text-fill-color:#030a1a!important}
.burger{display:none;font-size:1.2rem;cursor:pointer;color:var(--txt)}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.foot{
  min-height:48px;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:4px;
  padding:8px 2.8%;flex-shrink:0;
  background:rgba(6,15,36,.9);border-top:1px solid var(--bdr);
  font-size:.72rem;color:#3a5a80;z-index:100;font-family:var(--f1);
}
.foot a{color:#3a5a80;transition:color var(--tr)}
.foot a:hover{color:var(--azure)}
.foot-links{display:flex;gap:18px}
.foot-right{color:var(--azure);font-weight:600}
.foot-right a{color:var(--azure);transition:opacity var(--tr)}
.foot-right a:hover{opacity:.7}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f1);font-weight:700;font-size:.78rem;letter-spacing:.02em;
  padding:10px 24px;border-radius:50px;
  transition:transform var(--tr),box-shadow var(--tr),background var(--tr),border-color var(--tr);
  cursor:pointer;white-space:nowrap;
}
.bp{background:var(--grad);color:#030a1a}
.bp:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(0,188,255,.35)}
.bo{border:1px solid var(--azure);color:var(--azure)}
.bo:hover{background:rgba(0,188,255,.1);box-shadow:0 0 18px rgba(0,188,255,.18);transform:translateY(-1px)}
.bv{border:1px solid var(--bdr);color:var(--txt2)}
.bv:hover{border-color:var(--bdr-h);color:var(--azure);transform:translateY(-1px)}

/* ══════════════════════════════════════
   TAG / BADGE
══════════════════════════════════════ */
.tag{
  display:inline-block;font-family:var(--f1);font-size:.62rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--azure);
  border:1px solid rgba(0,188,255,.28);background:rgba(0,188,255,.06);
  padding:4px 12px;border-radius:50px;margin-bottom:10px;
}

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero-inner{
  display:grid;grid-template-columns:1fr 1.15fr;
  align-items:center;gap:36px;
  width:100%;padding:0 2.8%;
  position:relative;z-index:2;
}
.hbadge{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f1);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--azure);border:1px solid rgba(0,188,255,.28);background:rgba(0,188,255,.06);
  padding:5px 12px 5px 9px;border-radius:50px;margin-bottom:18px;
}
.hbadge .dot{width:5px;height:5px;background:var(--azure);border-radius:50%;animation:pulse 2s infinite}
.hero-l h1{
  font-family:var(--f1);font-size:clamp(1.9rem,3.3vw,2.85rem);
  font-weight:800;line-height:1.08;letter-spacing:-.03em;margin-bottom:14px;
}
.hero-l p{font-size:.9rem;color:#8aafc8;line-height:1.72;margin-bottom:22px;max-width:440px}
.hbtns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}

/* hero divider */
.hero-divider{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
.hd-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(0,188,255,.4),transparent)}
.hd-line.rev{background:linear-gradient(90deg,transparent,rgba(0,188,255,.4))}
.hd-quote{font-family:var(--f1);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(0,188,255,.75);white-space:nowrap}

/* story cards */
.hero-story{display:flex;flex-direction:column;gap:9px;max-width:490px}
.hs-card{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);
  padding:12px 15px;
  transition:border-color var(--tr),background var(--tr),transform var(--tr);
}
.hs-card:hover{border-color:var(--bdr-h);background:var(--card-h);transform:translateX(4px)}
.hs-icon{font-size:1.2rem;flex-shrink:0;margin-top:2px;transition:transform var(--tr)}
.hs-card:hover .hs-icon{transform:scale(1.15)}
.hs-title{font-family:var(--f1);font-size:.8rem;font-weight:700;color:var(--txt);margin-bottom:3px}
.hs-text{font-size:.76rem;color:#8aafc8;line-height:1.55}
.hs-text strong{color:var(--txt)}

/* KPI strip */
.hkpis{display:flex;gap:0;border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;width:fit-content;margin-bottom:20px}
.kpi{padding:10px 20px;text-align:center;transition:background var(--tr)}
.kpi:not(:last-child){border-right:1px solid var(--bdr)}
.kpi:hover{background:rgba(0,188,255,.05);cursor:default}
.kn{font-family:var(--f1);font-size:1.15rem;font-weight:800;background:var(--gt);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.kl{font-size:.62rem;color:var(--txt3);margin-top:3px;letter-spacing:.04em;text-transform:uppercase;font-weight:600}

/* ── CLOUD HERO VISUAL ── */
.cloud-hero-wrap{
  position:relative;width:min(460px,90vw);height:min(460px,90vw);
  display:flex;align-items:center;justify-content:center;
}
/* animated cloud rings */
.cr{
  position:absolute;top:50%;left:50%;border-radius:50%;
  border:1px dashed rgba(0,188,255,.12);
  transform-origin:50% 50%;
}
.cr1{width:180px;height:180px;margin:-90px 0 0 -90px;border-color:rgba(0,188,255,.24);animation:spinCW 18s linear infinite}
.cr2{width:310px;height:310px;margin:-155px 0 0 -155px;border-color:rgba(138,43,226,.16);animation:spinCCW 28s linear infinite}
.cr3{width:430px;height:430px;margin:-215px 0 0 -215px;border-color:rgba(0,188,255,.06);animation:spinCW 44s linear infinite}

/* central cloud SVG */
.cloud-core{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-54%);
  filter:drop-shadow(0 0 28px rgba(0,188,255,.5)) drop-shadow(0 0 55px rgba(138,43,226,.25));
  animation:cloudFloat 5s ease-in-out infinite;
}

/* orbit nodes */
.cn{
  position:absolute;top:50%;left:50%;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  pointer-events:none;
}
.cn-dot{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;
  border:1px solid rgba(0,188,255,.22);
  transition:transform .3s ease;
}
.cn-dot:hover{transform:scale(1.15)}
.cn-label{font-family:var(--f1);font-size:.52rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(138,175,200,.8);white-space:nowrap}
.cna{background:rgba(0,188,255,.15);box-shadow:0 0 14px rgba(0,188,255,.32)}
.cnb{background:rgba(138,43,226,.18);box-shadow:0 0 14px rgba(138,43,226,.34)}
.cnc{background:rgba(56,189,248,.14);box-shadow:0 0 14px rgba(56,189,248,.28)}

/* position offsets: inner ring r=90, outer ring r=155 */
.cn-r1a{transform:translate(-50%,calc(-50% - 90px))}
.cn-r1b{transform:translate(-50%,calc(-50% + 90px))}
.cn-r2a{transform:translate(calc(-50% - 155px),-50%)}
.cn-r2b{transform:translate(calc(-50% + 155px),-50%)}
.cn-r2c{transform:translate(calc(-50% - 110px),calc(-50% - 110px))}
.cn-r2d{transform:translate(calc(-50% + 110px),calc(-50% - 110px))}
.cn-r2e{transform:translate(calc(-50% - 110px),calc(-50% + 110px))}
.cn-r2f{transform:translate(calc(-50% + 110px),calc(-50% + 110px))}

/* particles */
.cptcl{position:absolute;border-radius:50%;background:var(--azure);opacity:0;animation:ptclPop 6s ease-in-out infinite}

/* ══════════════════════════════════════
   INNER PAGE HERO
══════════════════════════════════════ */
.ph{
  padding:16px 2.8% 18px;flex-shrink:0;
  background:var(--bg2);border-bottom:1px solid var(--bdr);position:relative;z-index:2;
}
.ph h1{
  font-family:var(--f1);font-size:clamp(1.35rem,2.6vw,2rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.1;
  max-width:660px;margin-bottom:8px;
}
.ph p{font-size:.84rem;color:#8aafc8;max-width:540px;line-height:1.6}

/* ══════════════════════════════════════
   MARQUEE
══════════════════════════════════════ */
.mq{overflow:hidden;padding:10px 0;background:var(--bg2);border-top:1px solid var(--bdr);flex-shrink:0}
.mq-t{display:flex;gap:32px;white-space:nowrap;animation:mq 30s linear infinite;width:max-content}
.mq-t span{font-family:var(--f1);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5a82a8;transition:color .22s ease,text-shadow .22s ease}
.gem{color:var(--azure)!important;font-size:.4rem!important;vertical-align:middle}
.mq-t span:hover{color:var(--azure);text-shadow:0 0 14px rgba(0,188,255,.55)}

/* ══════════════════════════════════════
   GRIDS
══════════════════════════════════════ */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:100%}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%}

/* ══════════════════════════════════════
   CARDS
══════════════════════════════════════ */
.card{
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);
  padding:18px 17px;position:relative;overflow:hidden;
  transition:transform var(--tr),border-color var(--tr),background var(--tr),box-shadow var(--tr);
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform var(--tr);
}
.card:hover{transform:translateY(-4px);border-color:var(--bdr-h);background:var(--card-h);box-shadow:0 12px 36px rgba(0,0,0,.4)}
.card:hover::before{transform:scaleX(1)}

.card-icon{
  width:40px;height:40px;border-radius:9px;
  background:rgba(0,188,255,.08);border:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  margin-bottom:12px;
  transition:background var(--tr),border-color var(--tr),transform var(--tr);
}
.card:hover .card-icon{background:rgba(0,188,255,.16);border-color:rgba(0,188,255,.32);transform:scale(1.1)}
.card h3{font-family:var(--f1);font-size:.88rem;font-weight:700;margin-bottom:7px;color:var(--txt)}
.card p{font-size:.78rem;color:#8aafc8;line-height:1.58}
.card .arrow{display:inline-block;margin-top:10px;font-family:var(--f1);font-size:.72rem;font-weight:700;color:var(--azure);opacity:0;transform:translateX(-6px);transition:opacity var(--tr),transform var(--tr)}
.card:hover .arrow{opacity:1;transform:translateX(0)}

/* numbered card */
.ncard .num{font-family:var(--f1);font-size:1.7rem;font-weight:800;color:var(--txt3);line-height:1;margin-bottom:8px;transition:color var(--tr)}
.ncard:hover .num{color:rgba(0,188,255,.28)}
.ncard h3{font-family:var(--f1);font-size:.86rem;font-weight:700;margin-bottom:5px}
.ncard p{font-size:.77rem;color:#8aafc8;line-height:1.52}

/* ══════════════════════════════════════
   PIPELINE STEPS
══════════════════════════════════════ */
.pstep{
  display:flex;align-items:center;gap:12px;
  background:var(--bg2);border:1px solid var(--bdr);border-radius:8px;padding:10px 14px;
  transition:border-color var(--tr),background var(--tr),transform var(--tr);margin-bottom:8px;
}
.pstep:hover{border-color:var(--bdr-h);background:rgba(0,188,255,.04);transform:translateX(5px)}
.pn{font-family:var(--f1);font-size:.75rem;font-weight:800;background:var(--gt);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;min-width:22px}
.pt{font-size:.78rem;color:var(--txt);opacity:.84}

/* ══════════════════════════════════════
   INFOBOX / VBOX / CTA
══════════════════════════════════════ */
.infobox{
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);
  padding:22px 20px;transition:border-color var(--tr),box-shadow var(--tr);
}
.infobox::before{content:'';display:block;height:2px;background:var(--grad);border-radius:2px;margin-bottom:18px}
.infobox:hover{border-color:var(--bdr-h);box-shadow:var(--shadow-h)}
.infobox h3{font-family:var(--f1);font-size:.9rem;font-weight:700;margin-bottom:8px}
.infobox p,.infobox a{font-size:.8rem;color:#8aafc8;line-height:1.6}
.infobox a:hover{color:var(--azure)}
.iicon{font-size:1.6rem;margin-bottom:10px;transition:transform var(--tr)}
.infobox:hover .iicon{transform:scale(1.1)}

.vbox{
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);
  padding:22px 20px;display:flex;flex-direction:column;gap:12px;
  transition:border-color var(--tr),box-shadow var(--tr);position:relative;overflow:hidden;
}
.vbox::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}
.vbox:hover{border-color:var(--bdr-h);box-shadow:var(--shadow-h)}
.vbox-icon{font-size:2rem;text-align:center}
.vbox h3{font-family:var(--f1);font-size:.9rem;font-weight:700;text-align:center}
.vbox p{font-size:.78rem;color:#8aafc8;text-align:center;line-height:1.6}
.vstats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vs{text-align:center;background:var(--bg2);border:1px solid var(--bdr);border-radius:8px;padding:9px 6px;transition:border-color var(--tr),background var(--tr)}
.vs:hover{border-color:var(--bdr-h);background:rgba(0,188,255,.04)}
.vs-n{font-family:var(--f1);font-size:1rem;font-weight:800;background:var(--gt);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.vs-l{font-size:.62rem;color:#3a5a80;text-transform:uppercase;letter-spacing:.04em;font-weight:600}

.sec-label{font-family:var(--f1);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--azure);margin-bottom:6px}
.sec-h{font-family:var(--f1);font-size:1.1rem;font-weight:700;letter-spacing:-.02em;margin-bottom:7px}
.sec-p{font-size:.8rem;color:#8aafc8;line-height:1.62;margin-bottom:14px}

.cta-box{
  background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r);
  padding:24px 26px;text-align:center;
  transition:border-color var(--tr),box-shadow var(--tr);position:relative;overflow:hidden;
}
.cta-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}
.cta-box:hover{border-color:var(--bdr-h);box-shadow:var(--shadow-h)}
.cta-box h2{font-family:var(--f1);font-size:1.1rem;font-weight:700;margin-bottom:7px}
.cta-box p{font-size:.8rem;color:#8aafc8;margin-bottom:16px}

/* legal */
.legal{font-size:.8rem;color:#8aafc8;line-height:1.78}
.legal h2{font-family:var(--f1);font-size:.9rem;font-weight:700;color:var(--txt);margin:15px 0 7px}
.legal ul{padding-left:18px;list-style:disc}
.legal ul li{margin-bottom:5px}
.legal a{color:var(--azure)}

/* ══════════════════════════════════════
   CONTACT FORM
══════════════════════════════════════ */
.form-wrap{
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);
  padding:28px 26px;
}
.form-wrap::before{content:'';display:block;height:2px;background:var(--grad);border-radius:2px;margin-bottom:22px}
.form-title{font-family:var(--f1);font-size:.95rem;font-weight:700;margin-bottom:18px;color:var(--txt)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-group{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.form-group label{font-family:var(--f1);font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--txt2)}
.form-group input,.form-group textarea,.form-group select{
  background:var(--bg2);border:1px solid var(--bdr);border-radius:8px;
  color:var(--txt);font-family:var(--f2);font-size:.82rem;padding:10px 13px;
  transition:border-color var(--tr),box-shadow var(--tr);outline:none;
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
  border-color:var(--azure);box-shadow:0 0 0 3px rgba(0,188,255,.12);
}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--txt3)}
.form-group textarea{resize:vertical;min-height:110px}
.form-group select option{background:var(--bg2)}
.form-submit{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:12px 22px;border-radius:50px;
  background:var(--grad);border:none;cursor:pointer;
  font-family:var(--f1);font-size:.8rem;font-weight:700;color:#030a1a;
  transition:transform var(--tr),box-shadow var(--tr);
}
.form-submit:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,188,255,.38)}

/* ══════════════════════════════════════
   CENTRED PAGES (404 / Thanks)
══════════════════════════════════════ */
.centered-page{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 4%}
.centered-card{
  background:var(--card);border:1px solid var(--bdr-h);border-radius:20px;
  padding:52px 44px;text-align:center;max-width:480px;width:100%;
  box-shadow:0 28px 72px rgba(0,0,0,.55);
  position:relative;overflow:hidden;
}
.centered-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.err-num{font-family:var(--f1);font-size:5rem;font-weight:800;background:var(--gt);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:12px}
.cc-icon{font-size:3rem;margin-bottom:14px}
.cc-title{font-family:var(--f1);font-size:1.6rem;font-weight:800;margin-bottom:12px}
.cc-text{font-size:.84rem;color:#8aafc8;line-height:1.65;margin-bottom:10px}
.cc-email{color:var(--azure);font-family:var(--f1);font-weight:700;font-size:.88rem;display:block;margin-bottom:22px}
.cc-email:hover{opacity:.75}
.cc-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* ══════════════════════════════════════
   MODAL
══════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(3,10,26,.82);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity var(--tr);
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{
  background:var(--bg2);border:1px solid var(--bdr-h);border-radius:18px;
  padding:34px 30px;max-width:530px;width:92%;position:relative;
  box-shadow:0 36px 90px rgba(0,0,0,.65);
  transform:translateY(22px) scale(.97);
  transition:transform .3s var(--ease);max-height:88vh;overflow-y:auto;
}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1)}
.modal-box::before{content:'';display:block;height:2px;background:var(--grad);border-radius:2px;margin-bottom:22px}
.modal-close{
  position:absolute;top:14px;right:16px;
  background:rgba(255,255,255,.06);border:1px solid var(--bdr);border-radius:7px;
  color:var(--txt2);font-size:.85rem;width:30px;height:30px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background var(--tr),color var(--tr),border-color var(--tr);
}
.modal-close:hover{background:rgba(0,188,255,.14);color:var(--azure);border-color:var(--bdr-h)}
.modal-icon{font-size:2.2rem;margin-bottom:8px}
.modal-title{
  font-family:var(--f1);font-size:1.2rem;font-weight:700;letter-spacing:-.02em;margin-bottom:10px;
  background:var(--gt);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.modal-summary{font-size:.85rem;color:#8aafc8;line-height:1.67;margin-bottom:16px}
.modal-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.modal-list li{
  font-size:.82rem;color:#8aafc8;line-height:1.6;
  padding:10px 13px 10px 36px;position:relative;
  background:var(--card);border:1px solid var(--bdr);border-radius:9px;
  transition:border-color var(--tr),background var(--tr);
}
.modal-list li:hover{border-color:var(--bdr-h);background:var(--card-h)}
.modal-list li::before{
  content:'→';position:absolute;left:13px;top:10px;
  font-family:var(--f1);font-size:.78rem;font-weight:700;
  background:var(--gt);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.modal-list li strong{color:var(--txt)}

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes spinCW{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes spinCCW{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes cloudFloat{0%,100%{transform:translate(-50%,-54%) translateY(0)}50%{transform:translate(-50%,-54%) translateY(-12px)}}
@keyframes ptclPop{0%{opacity:0;transform:scale(.4)}35%{opacity:.65}70%{opacity:.25}100%{opacity:0;transform:scale(2.2)}}

/* ══════════════════════════════════════
   LAPTOP / SMALL SCREENS
══════════════════════════════════════ */
@media(max-width:1380px){
  html,body{overflow-x:hidden;overflow-y:auto}
  .page{min-height:100vh;overflow:visible}
  .main{overflow:visible;min-height:0}
}

/* ══════════════════════════════════════
   TABLET / MOBILE
══════════════════════════════════════ */
@media(max-width:900px){
  html,body{overflow:auto}
  .page{height:auto;min-height:100vh;overflow:visible}
  .main{flex-direction:column;overflow:visible}
  .nav-ul{display:none;position:fixed;top:78px;left:0;right:0;flex-direction:column;background:rgba(3,10,26,.98);padding:14px 4%;gap:4px;border-bottom:1px solid var(--bdr);z-index:99;backdrop-filter:blur(22px)}
  .nav-ul.open{display:flex}
  .burger{display:block}
  .hero-inner{grid-template-columns:1fr;padding:30px 4%}
  .hero-r{display:none}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .g2{grid-template-columns:1fr}
  .foot{flex-direction:column;align-items:flex-start;gap:7px;min-height:auto;padding:14px 4%}
  .foot-links{flex-wrap:wrap;gap:10px}
  .foot-right{margin-left:0}
  .form-row{grid-template-columns:1fr}
}
@media(max-width:540px){
  .g3,.g4{grid-template-columns:1fr}
  .foot-links{gap:8px}
  .hero-l h1{font-size:clamp(1.8rem,8vw,2.4rem)}
  .centered-card{padding:38px 24px}
  .nav-ul{padding:14px 4%}
}