/* =========================================================
   Optis — shared styles for inner pages, brand logo & mega menu
   Built on the tokens defined in assets/styles.css
   ========================================================= */

/* ===== brand logo (header + footer) ===== */
.brand-logo{
  width:70px;height:70px;border-radius:50%;object-fit:contain;
  background:radial-gradient(circle at 50% 40%,rgba(120,190,255,.22),transparent 70%);
  box-shadow:0 0 26px rgba(90,140,255,.45);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.brand:hover .brand-logo{transform:rotate(-6deg) scale(1.05);box-shadow:0 0 34px rgba(140,110,255,.65)}
.brand{display:inline-flex;align-items:center;gap:12px}
.footer .brand-logo{width:42px;height:42px}
.site-header.is-stuck .brand-logo{width:56px;height:56px}

/* ===== products mega menu ===== */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-link--drop{display:inline-flex;align-items:center;gap:6px}
.caret{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.nav-drop.open .caret{transform:rotate(180deg)}
.mega-toggle{display:none}

.mega{
  position:absolute;top:calc(100% + 14px);inset-inline-end:-140px;width:min(1000px,92vw);
  padding:22px;border-radius:24px;border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(8,11,28,.97),rgba(10,8,26,.97));
  backdrop-filter:blur(18px);
  box-shadow:0 40px 90px -50px rgba(90,140,255,.9),0 0 0 1px rgba(120,200,255,.06) inset;
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.985);
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .3s;
  z-index:95;
}
.mega::before{
  content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;
  background:radial-gradient(600px circle at 80% -10%,rgba(0,200,255,.10),transparent 60%);
}
.nav-drop.open .mega{opacity:1;visibility:visible;transform:none}
.mega-inner{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mega-col{padding:16px 14px;border-radius:18px;border:1px solid transparent;transition:border-color .35s,background .35s,transform .35s var(--ease)}
.mega-col:hover{border-color:var(--line);background:var(--surface);transform:translateY(-3px)}
.mega-col--hl{background:linear-gradient(160deg,rgba(139,92,246,.14),rgba(0,200,255,.06));border-color:var(--line)}
.mega-head{display:block;margin-bottom:12px}
.mega-lvl{display:inline-block;font-family:"Space Grotesk",sans-serif;font-size:.68rem;letter-spacing:.14em;color:var(--cyan);border:1px solid var(--line-strong);border-radius:999px;padding:3px 10px;margin-bottom:9px}
.mega-lvl--hl{color:#e6d5ff;border-color:rgba(181,124,255,.55);background:rgba(139,92,246,.16)}
.mega-head b{display:block;font-size:1rem;margin-bottom:4px}
.mega-head:hover b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mega-head small{display:block;color:var(--muted);font-size:.8rem;line-height:1.7}
.mega-list li{margin-top:4px}
.mega-list a{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:11px;font-size:.86rem;color:var(--muted);transition:color .25s,background .25s,padding .25s var(--ease)}
.mega-list a:hover{color:var(--text);background:var(--surface-2);padding-inline-start:14px}
.mega-dot{width:6px;height:6px;border-radius:50%;background:var(--grad);box-shadow:0 0 10px rgba(120,190,255,.9);margin-inline-start:auto}
.mega-cta{display:inline-block;margin-top:14px;font-size:.84rem;color:var(--cyan)}
.mega-cta:hover{color:var(--text)}

@media (max-width:980px){
  .mega{position:static;width:auto;inset-inline-end:auto;padding:8px;margin:6px 0 4px;border-radius:16px;box-shadow:none;
    display:none;opacity:1;visibility:visible;transform:none}
  .nav-drop{display:block}
  .nav-drop.open .mega{display:block;animation:megaIn .3s var(--ease) both}
  .mega-inner{grid-template-columns:1fr;gap:4px}
  .mega-col{padding:12px}
  .mega-toggle{
    display:block;position:absolute;top:8px;inset-inline-start:8px;width:34px;height:34px;
    border-radius:10px;border:1px solid var(--line);background:var(--surface);cursor:pointer;
  }
  .mega-toggle::before{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-inline-start:1.6px solid var(--text);border-bottom:1.6px solid var(--text);transform:translateY(-2px) rotate(-45deg);transition:transform .3s var(--ease)}
  .nav-drop.open .mega-toggle::before{transform:translateY(2px) rotate(135deg)}
}
@keyframes megaIn{from{opacity:0;transform:translateY(-6px)}}

/* ===== inner page hero ===== */
.subpage main{padding-top:0}
.page-hero{position:relative;padding:150px 0 54px}
.page-hero .eyebrow{margin-bottom:14px}
.page-title{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:900;margin-bottom:16px;max-width:20ch}
.page-hero .lead{max-width:62ch;font-size:1.03rem}
.page-hero-line{position:absolute;bottom:0;inset-inline:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}
.page-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:104px;font-size:.82rem;color:var(--muted)}
.crumbs a{transition:color .25s}
.crumbs a:hover{color:var(--cyan)}
.crumbs b{color:var(--text);font-weight:500}
.crumbs+.page-hero{padding-top:26px}

/* hero facts row */
.facts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.facts span{
  display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);font-size:.84rem;color:#c3cfef;
}
.facts span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad);box-shadow:0 0 10px rgba(120,190,255,.8)}

/* ===== generic inner blocks ===== */
.section--tight{padding:78px 0}
.head--center{margin-inline:auto;text-align:center}
.prose{color:var(--muted);font-size:1rem;max-width:70ch}
.prose p+p{margin-top:14px}

.ticklist{display:grid;gap:12px}
.ticklist li{position:relative;padding:14px 46px 14px 18px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:#cfd8f5;font-size:.94rem;transition:border-color .35s,transform .35s var(--ease)}
.ticklist li:hover{border-color:var(--line-strong);transform:translateX(-4px)}
.ticklist li::before{
  content:"";position:absolute;inset-inline-start:16px;top:16px;width:16.5px;height:19px;
  background:var(--grad);opacity:.95;
  clip-path:polygon(0 25%,0 75%,50% 100%,100% 75%,100% 25%,50% 0,50% 0,
                    50% 3.2%,6.5% 26.6%,6.5% 73.4%,50% 96.8%,93.5% 73.4%,93.5% 26.6%,50% 3.2%);
  filter:drop-shadow(0 0 7px rgba(0,200,255,.35));
}
.ticklist li::after{content:"";position:absolute;inset-inline-start:21.25px;top:22.05px;width:6px;height:6.9px;
  background:var(--grad);border:0;transform:none;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

.ticklist--2{grid-template-columns:1fr 1fr}

.numlist{counter-reset:n;display:grid;gap:14px}
.numlist li{position:relative;counter-increment:n;padding:16px 18px;padding-inline-start:62px;border-radius:16px;border:1px solid var(--line);background:var(--surface);transition:border-color .35s,transform .35s var(--ease)}
.numlist li:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.numlist li::before{
  content:counter(n);position:absolute;inset-inline-start:16px;top:12px;width:32px;height:32px;border-radius:11px;
  display:grid;place-items:center;background:var(--grad);color:#05060f;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:.85rem;
}
.numlist h4{font-size:1rem;margin-bottom:5px}
.numlist p{color:var(--muted);font-size:.9rem}

/* spec table */
.spec{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:.93rem}
.spec th,.spec td{padding:14px 18px;text-align:start;border-bottom:1px solid var(--line)}
.spec thead th{background:rgba(255,255,255,.045);font-family:"Space Grotesk",sans-serif;font-size:.82rem;letter-spacing:.08em;color:#bcd4ff}
.spec tbody tr:last-child td{border-bottom:0}
.spec tbody tr{transition:background .3s}
.spec tbody tr:hover{background:rgba(255,255,255,.03)}
.spec td b{color:var(--text)}
.spec td span{color:var(--muted)}
.table-wrap{overflow-x:auto}

/* ===== screenshot gallery ===== */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.shot{
  position:relative;border-radius:18px;border:1px solid var(--line);background:rgba(8,11,28,.6);
  overflow:hidden;cursor:zoom-in;transition:transform .45s var(--ease),border-color .45s,box-shadow .45s;
}
.shot:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 30px 60px -40px rgba(90,140,255,.9)}
.shot img{display:block;width:100%;aspect-ratio:16/11;object-fit:cover;object-position:top center;opacity:0;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.shot img.loaded{opacity:1}
.shot:hover img{transform:scale(1.03)}
.shot figcaption{display:flex;align-items:center;gap:9px;padding:13px 16px;font-size:.87rem;color:#cfd8f5;border-top:1px solid var(--line)}
.shot figcaption i{width:7px;height:7px;border-radius:50%;background:var(--grad);flex:none}
.shot-zoom{position:absolute;top:12px;inset-inline-end:12px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(5,8,22,.72);border:1px solid var(--line);opacity:0;transform:translateY(-6px);transition:all .35s var(--ease)}
.shot:hover .shot-zoom{opacity:1;transform:none}
.shot-zoom svg{width:15px;height:15px;fill:none;stroke:var(--cyan);stroke-width:1.7;stroke-linecap:round}

.lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:30px;background:rgba(3,4,12,.88);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.lightbox.on{opacity:1;visibility:visible}
.lightbox img{max-width:min(1200px,94vw);max-height:82vh;border-radius:16px;border:1px solid var(--line-strong);box-shadow:0 50px 120px -50px rgba(90,140,255,.9)}
.lightbox-cap{margin-top:14px;color:#cfd8f5;font-size:.92rem;text-align:center}
.lightbox-close{position:absolute;top:22px;inset-inline-end:22px;width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:1.3rem;cursor:pointer}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(8,11,28,.8);color:var(--text);cursor:pointer;font-size:1.2rem}
.lightbox-nav--prev{inset-inline-start:22px}
.lightbox-nav--next{inset-inline-end:22px}

/* ===== product level cards on the home page ===== */
.fam-go{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:.88rem;color:var(--cyan);
  transition:gap .3s var(--ease)
}
.fam-card:hover .fam-go{gap:14px}
.fam-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fam-list a{display:inline;transition:color .25s}
.fam-list a:hover b{color:var(--cyan)}

/* ===== articles (WordPress-ready) ===== */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{display:flex;flex-direction:column;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);overflow:hidden;transition:transform .45s var(--ease),border-color .45s,background .45s}
.post:hover{transform:translateY(-6px);border-color:var(--line-strong);background:var(--surface-2)}
.post-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(150deg,rgba(30,50,120,.5),rgba(120,40,160,.28))}
.post-thumb img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s,transform .7s var(--ease)}
.post-thumb img.loaded{opacity:1}
.post:hover .post-thumb img{transform:scale(1.05)}
.post-cat{position:absolute;top:12px;inset-inline-end:12px;padding:5px 12px;border-radius:999px;font-size:.74rem;background:rgba(5,8,22,.78);border:1px solid var(--line-strong);color:#bcd4ff}
.post-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-body h3{font-size:1.05rem;line-height:1.7}
.post-body h3 a:hover{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.post-excerpt{color:var(--muted);font-size:.9rem;flex:1}
.post-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:.78rem;color:#7f8dbb;border-top:1px solid var(--line);padding-top:12px}
.post-meta span{display:inline-flex;align-items:center;gap:6px}
.post-meta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px}
.filters button{
  padding:8px 17px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  color:#c3cfef;font-family:inherit;font-size:.85rem;cursor:pointer;transition:all .3s var(--ease)
}
.filters button:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.filters button.on{background:var(--grad);color:#05060f;border-color:transparent;font-weight:700}

.searchbar{position:relative;max-width:340px;margin-inline-start:auto}
.searchbar input{width:100%;padding:11px 42px 11px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-family:inherit;font-size:.88rem}
.searchbar input:focus{outline:none;border-color:var(--line-strong)}
.searchbar svg{position:absolute;inset-inline-end:15px;top:12px;width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:1.7}
.archive-top{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;margin-bottom:26px}

.pagination{display:flex;justify-content:center;gap:8px;margin-top:46px}
.pagination a,.pagination span{min-width:42px;height:42px;display:grid;place-items:center;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-family:"Space Grotesk",sans-serif;font-size:.88rem;color:var(--muted);transition:all .3s var(--ease)}
.pagination a:hover{border-color:var(--line-strong);color:var(--text);transform:translateY(-2px)}
.pagination .current{background:var(--grad);color:#05060f;border-color:transparent;font-weight:700}

.empty-state{padding:60px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius)}

/* single post */
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
.post-side{position:sticky;top:100px;display:grid;gap:18px}
.side-box{padding:22px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface)}
.side-box h4{font-size:.98rem;margin-bottom:14px}
.side-box li a{display:block;padding:8px 0;font-size:.88rem;color:var(--muted);border-bottom:1px solid var(--line);transition:color .25s,padding .25s var(--ease)}
.side-box li:last-child a{border-bottom:0}
.side-box li a:hover{color:var(--cyan);padding-inline-start:6px}
.side-box .toc a.on{color:var(--cyan)}

.wp-content{color:#cbd5f0;font-size:1.02rem;line-height:2.1}
.wp-content>*+*{margin-top:20px}
.wp-content h2{font-size:1.5rem;margin-top:42px;padding-inline-end:16px;border-inline-end:3px solid transparent;border-image:var(--grad) 1}
.wp-content h3{font-size:1.18rem;margin-top:32px}
.wp-content a{color:var(--cyan);text-decoration:underline;text-underline-offset:4px}
.wp-content ul{display:grid;gap:9px}
.wp-content ul li{position:relative;padding-inline-end:20px}
.wp-content ul li::before{content:"";position:absolute;inset-inline-end:0;top:14px;width:7px;height:7px;border-radius:50%;background:var(--grad)}
.wp-content ol{counter-reset:w;display:grid;gap:9px}
.wp-content ol li{counter-increment:w;position:relative;padding-inline-end:28px}
.wp-content ol li::before{content:counter(w);position:absolute;inset-inline-end:0;top:5px;width:20px;height:20px;border-radius:7px;display:grid;place-items:center;background:rgba(80,130,255,.16);border:1px solid var(--line-strong);font-size:.72rem;color:var(--cyan)}
.wp-content blockquote{margin:0;padding:20px 22px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(0,200,255,.07),rgba(139,92,246,.07));color:#dbe4ff}
.wp-content img,.wp-content figure img{width:100%;border-radius:16px;border:1px solid var(--line)}
.wp-content figcaption{color:var(--muted);font-size:.84rem;text-align:center;margin-top:8px}
.wp-content code{font-family:"Space Grotesk",monospace;background:rgba(255,255,255,.06);padding:2px 7px;border-radius:6px;font-size:.9em}
.wp-content table{width:100%;border-collapse:collapse;font-size:.92rem}
.wp-content th,.wp-content td{border:1px solid var(--line);padding:11px 14px;text-align:start}
.wp-content th{background:rgba(255,255,255,.045)}

.post-hero-img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:22px;border:1px solid var(--line);margin-bottom:34px}
.post-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:38px;padding-top:24px;border-top:1px solid var(--line)}
.post-tags a{padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:.82rem;color:var(--muted);transition:all .3s var(--ease)}
.post-tags a:hover{color:var(--text);border-color:var(--line-strong)}

/* ===== contact ===== */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.form{padding:30px;border-radius:22px;border:1px solid var(--line);background:rgba(8,11,28,.7);box-shadow:0 30px 70px -50px rgba(80,120,255,.8)}
.field{margin-bottom:18px}
.field label{display:block;font-size:.86rem;color:#c3cfef;margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:14px;border:1px solid var(--line);background:var(--surface);
  color:var(--text);font-family:inherit;font-size:.93rem;transition:border-color .3s,background .3s
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--line-strong);background:var(--surface-2)}
.field select option{background:#0a0d20}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{color:var(--muted);font-size:.82rem;margin-top:14px}
.form-ok{display:none;margin-top:16px;padding:14px 16px;border-radius:14px;border:1px solid rgba(52,224,161,.4);background:rgba(52,224,161,.1);color:#9ff3d3;font-size:.9rem}
.form-ok.on{display:block}

.contact-cards{display:grid;gap:16px}
.ccard{display:flex;gap:16px;padding:22px;border-radius:18px;border:1px solid var(--line);background:var(--surface);transition:transform .4s var(--ease),border-color .4s}
.ccard:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.ccard .ico{margin-bottom:0;flex:none}
.ccard h4{font-size:1rem;margin-bottom:6px}
.ccard p,.ccard a{color:var(--muted);font-size:.9rem;display:block}
.ccard a:hover{color:var(--cyan)}
.map-frame{margin-top:16px;border-radius:20px;border:1px solid var(--line);overflow:hidden;height:230px;background:
  radial-gradient(circle at 30% 40%,rgba(0,200,255,.16),transparent 55%),
  radial-gradient(circle at 70% 70%,rgba(139,92,246,.18),transparent 55%),
  repeating-linear-gradient(90deg,rgba(120,160,255,.14) 0 1px,transparent 1px 46px),
  repeating-linear-gradient(0deg,rgba(120,160,255,.14) 0 1px,transparent 1px 46px),#070a18;
  display:grid;place-items:center;color:var(--muted);font-size:.88rem;text-align:center;padding:20px}

/* ===== about ===== */
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.milestones{position:relative;display:grid;gap:20px;padding-inline-end:26px}
.milestones::before{content:"";position:absolute;inset-inline-end:7px;top:8px;bottom:8px;width:1.5px;background:linear-gradient(180deg,var(--cyan),var(--violet),transparent)}
.milestone{position:relative;padding:20px 22px;border-radius:16px;border:1px solid var(--line);background:var(--surface);transition:transform .4s var(--ease),border-color .4s}
.milestone:hover{transform:translateX(-5px);border-color:var(--line-strong)}
.milestone::before{content:"";position:absolute;inset-inline-end:-26px;top:26px;width:13px;height:13px;border-radius:50%;background:var(--grad);box-shadow:0 0 14px rgba(120,190,255,.9);transform:translateX(50%)}
.milestone .yr{font-family:"Space Grotesk",sans-serif;font-size:.8rem;color:var(--cyan);letter-spacing:.1em}
.milestone h4{font-size:1.02rem;margin:6px 0}
.milestone p{color:var(--muted);font-size:.9rem}

/* ===== compare / cta band ===== */
.band{
  position:relative;padding:44px;border-radius:26px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(150deg,rgba(30,50,120,.32),rgba(120,40,160,.18));
  display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between
}
.band h3{font-size:clamp(1.2rem,2.4vw,1.6rem);margin-bottom:8px}
.band p{color:var(--muted);font-size:.95rem;max-width:52ch}
.band .hero-actions{margin-top:0}

/* ===== responsive ===== */
@media (max-width:980px){
  .post-layout{grid-template-columns:1fr}
  .post-side{position:static}
  .contact-grid{grid-template-columns:1fr}
  .shots{grid-template-columns:repeat(2,1fr)}
  .post-grid{grid-template-columns:repeat(2,1fr)}
  .value-grid{grid-template-columns:1fr 1fr}
  .page-hero{padding:126px 0 44px}
  .crumbs{padding-top:96px}
}
@media (max-width:640px){
  .shots,.post-grid,.value-grid,.ticklist--2,.field-row{grid-template-columns:1fr}
  .band{padding:28px}
  .searchbar{max-width:none;margin-inline-start:0;width:100%}
}


/* ---------- homepage: product card links ---------- */
.head-hint{margin-top:10px;color:var(--muted);font-size:.9rem}
.fam-card .fam-list a{color:inherit}
.fam-card .fam-list a:hover b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.fam-card .fam-list{margin-top:auto}
.fam-title-link{color:inherit;transition:color .25s}
.fam-title-link:hover,.fam-title-link:focus-visible{color:var(--cyan)}
.fam-title-link:focus-visible{outline:1px solid var(--cyan);outline-offset:4px;border-radius:3px}
.fam-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:.88rem;color:var(--cyan);font-weight:500}
.fam-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.fam-cta:hover svg{transform:translateX(-4px)}

/* =========================================================
   contact hero — structural network carrying a signal
   ========================================================= */
.page-hero--contact{padding:150px 0 60px;overflow:hidden}
.crumbs+.page-hero--contact{padding-top:34px}
.chero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.chero-art{position:absolute;inset:0;width:100%;height:100%;display:block}
.chero-veil{position:absolute;inset:0;background:
  radial-gradient(900px circle at 22% 30%,rgba(0,200,255,.10),transparent 62%),
  radial-gradient(760px circle at 78% 70%,rgba(139,92,246,.12),transparent 62%),
  linear-gradient(180deg,rgba(5,6,15,.72),rgba(5,6,15,.42) 45%,var(--bg))}
.cb-frames path,.cb-comb path{stroke-dasharray:1 0}
.cb-pulse{stroke-dasharray:70 1200;stroke-dashoffset:1270;filter:drop-shadow(0 0 6px rgba(0,200,255,.7));animation:cbFlow 4.6s linear infinite}
.cb-pulse--back{animation-duration:5.4s;animation-delay:1.6s;filter:drop-shadow(0 0 6px rgba(167,139,250,.6))}
@keyframes cbFlow{to{stroke-dashoffset:0}}
.cb-ring{transform-origin:800px 306px;opacity:0;animation:cbRing 3.6s ease-out infinite}
.cb-ring--2{animation-delay:1.2s}
.cb-ring--3{animation-delay:2.4s}
@keyframes cbRing{0%{transform:scale(.35);opacity:.85}70%{opacity:.18}100%{transform:scale(2.5);opacity:0}}
.cb-hex{animation:cbHex 3.6s ease-in-out infinite}
@keyframes cbHex{0%,100%{opacity:.6}50%{opacity:1}}
.cb-nodes circle{animation:cbNode 3.2s ease-in-out infinite}
.cb-nodes circle:nth-child(2){animation-delay:1.1s}
@keyframes cbNode{0%,100%{opacity:.55}50%{opacity:1}}

.chero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.chero-title{max-width:none;white-space:nowrap}
.chero-copy .lead{max-width:56ch}
.chero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:rgba(10,14,32,.6);color:#cfd8f5;font-size:.85rem}

.chero-visual{position:relative;padding:18px;border-radius:24px;border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(30,50,120,.30),rgba(120,40,160,.15));backdrop-filter:blur(5px);
  box-shadow:0 40px 90px -60px rgba(80,130,255,.9)}
.chv-head{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--muted);padding:2px 4px 12px}
.chv-head b{margin-inline-start:auto;font-family:"Space Grotesk",sans-serif;color:#cfe4ff;font-weight:600;letter-spacing:.04em}
.chv-dot{width:9px;height:9px;border-radius:50%;background:#34e0a1;box-shadow:0 0 10px #34e0a1;animation:chvBlink 2.2s ease-in-out infinite}
@keyframes chvBlink{0%,100%{opacity:1}50%{opacity:.35}}
.chv-art{width:100%;height:auto;display:block;border-radius:16px;background:rgba(4,6,18,.5);border:1px solid var(--line)}

@keyframes chvCore{0%,100%{opacity:.75}50%{opacity:1}}
.chv-packet{filter:drop-shadow(0 0 7px rgba(0,220,255,.85))}
.chv-packet--back{filter:drop-shadow(0 0 7px rgba(167,139,250,.8))}
.chv-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.chv-foot div{padding:10px 8px;border-radius:12px;border:1px solid var(--line);background:rgba(8,11,28,.6);text-align:center}
.chv-foot b{display:block;font-family:"Space Grotesk",sans-serif;color:#dff0ff;font-size:.95rem}
.chv-foot span{display:block;color:var(--muted);font-size:.72rem;margin-top:3px}

/* contact cards — tidy icon/text alignment */
.ccard{display:flex;gap:16px;align-items:flex-start;padding:22px}
.ccard .ico{margin:0;flex:none;width:44px;height:44px}
.ccard-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;padding-top:2px}
.ccard-body h4{margin:0;font-size:1rem;line-height:1.5}
.ccard-body a,.ccard-body p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.85;display:block}

/* form: toasts, custom selects, counters */
.form{position:relative}
.form-toasts{position:relative;z-index:6;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.form-toasts:not(:empty){margin-bottom:22px}
.toast{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-radius:14px;font-size:.86rem;line-height:1.7;
  border:1px solid rgba(255,120,140,.45);background:linear-gradient(120deg,rgba(60,12,26,.96),rgba(24,10,32,.96));color:#ffd9e0;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.9);animation:toastIn .3s var(--ease) both}
.toast--ok{border-color:rgba(52,224,161,.45);background:linear-gradient(120deg,rgba(8,44,34,.96),rgba(10,26,34,.96));color:#b8f5df}
.toast.is-out{animation:toastOut .3s var(--ease) both}
.toast i{flex:none;width:12px;height:13.9px;margin-top:3px;background:currentColor;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-8px)}}
.field input.is-bad,.field textarea.is-bad,.sel.is-bad .sel-btn{border-color:rgba(255,110,140,.6);background:rgba(70,16,32,.28)}
.field-meta{margin-top:7px;font-size:.76rem;color:var(--muted);text-align:start}

.sel{position:relative}
.sel-btn{width:100%;display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:14px;border:1px solid var(--line);
  background:var(--surface);color:var(--text);font-family:inherit;font-size:.93rem;text-align:start;cursor:pointer;
  transition:border-color .3s,background .3s}
.sel-btn:hover{border-color:var(--line-strong);background:var(--surface-2)}
.sel-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel.is-empty .sel-val{color:var(--muted)}
.sel-ar{width:10px;height:11px;flex:none;background:rgba(255,255,255,.34);
  clip-path:polygon(50% 100%,100% 25%,0 25%);transition:transform .3s var(--ease),background .3s}
.sel.open .sel-btn{border-color:transparent;background:linear-gradient(100deg,rgba(0,200,255,.14),rgba(139,92,246,.12));box-shadow:0 0 0 1px rgba(120,180,255,.35)}
.sel.open .sel-ar{transform:rotate(180deg);background:var(--grad)}
.sel-list{position:absolute;z-index:20;inset-inline:0;top:calc(100% + 8px);padding:7px;border-radius:16px;
  border:1px solid var(--line-strong);background:rgba(8,11,28,.98);backdrop-filter:blur(14px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.95);display:none;max-height:262px;overflow:auto}
.sel.open .sel-list{display:block;animation:selIn .22s var(--ease) both}
@keyframes selIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sel-opt{position:relative;padding:11px 40px 11px 14px;border-radius:11px;font-size:.9rem;color:#cfd8f5;cursor:pointer;transition:background .2s,color .2s}
.sel-opt::before{content:"";position:absolute;inset-inline-end:15px;top:50%;width:9.8px;height:11.3px;transform:translateY(-50%);
  background:rgba(255,255,255,.14);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:background .2s}
.sel-opt:hover,.sel-opt.is-active{background:linear-gradient(100deg,rgba(0,200,255,.16),rgba(139,92,246,.13));color:#fff}
.sel-opt:hover::before,.sel-opt.is-active::before{background:var(--grad)}
.sel-opt[aria-selected="true"]::before{background:var(--grad)}
.field--product{animation:selIn .28s var(--ease) both}

@media (max-width:980px){
  .chero-grid{grid-template-columns:1fr;gap:34px}
  .chero-title{white-space:normal}
  .page-hero--contact{padding:126px 0 44px}
  .chv-foot{grid-template-columns:1fr 1fr}
  .chv-foot div:last-child{grid-column:1/-1}
}


/* contact cards: aligned rows */
.ccard--line{flex-direction:column;align-items:stretch;gap:10px}
.ccard-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ccard-id{display:flex;align-items:center;gap:12px;min-width:0}
.ccard-id .ico{margin:0;flex:none;width:44px;height:44px}
.ccard-id h4{margin:0;font-size:1rem;line-height:1}
.ccard-val{color:var(--muted);font-size:.95rem;white-space:nowrap;font-family:"Space Grotesk",sans-serif}
.ccard-val:hover{color:var(--cyan)}
.ccard-note{margin:0;color:var(--muted);font-size:.84rem;padding-inline-start:56px}
@media (max-width:520px){
  .ccard-row{flex-direction:column;align-items:flex-start;gap:10px}
  .ccard-note{padding-inline-start:0}
}

/* contact hero visual: device + floating comb badges */
.chero-visual{overflow:hidden}
.chv-art{width:100%;height:auto;display:block;border-radius:18px;background:radial-gradient(120% 100% at 50% 30%,rgba(12,32,62,.85),rgba(4,6,18,.75));border:1px solid var(--line)}
.chv-badge{transform-box:fill-box;transform-origin:center;animation:chvFloat 5.2s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(0,190,255,.35))}
.chv-badge--2{animation-delay:.5s}
.chv-badge--3{animation-delay:1s}
.chv-badge--4{animation-delay:1.5s}
@keyframes chvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.chv-beam{animation:chvBeam 3.4s ease-in-out infinite}
@keyframes chvBeam{0%,100%{opacity:.45;transform:scaleX(.9)}50%{opacity:1;transform:scaleX(1)}}
.chv-beam{transform-box:fill-box;transform-origin:center}
.chv-rays{animation:chvRays 4s ease-in-out infinite}
@keyframes chvRays{0%,100%{opacity:.2}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){
  .chv-badge,.chv-beam,.chv-rays{animation:none}
}

/* =========================================================
   about hero — civil frames + AI comb, hive network visual
   ========================================================= */
.page-hero--about{padding:150px 0 60px;overflow:hidden}
.crumbs+.page-hero--about{padding-top:34px}
.ahero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ahero-art{position:absolute;inset:0;width:100%;height:100%;display:block}
.ahero-veil{position:absolute;inset:0;background:
  radial-gradient(900px circle at 24% 32%,rgba(0,200,255,.10),transparent 62%),
  radial-gradient(760px circle at 76% 68%,rgba(139,92,246,.12),transparent 62%),
  linear-gradient(180deg,rgba(5,6,15,.72),rgba(5,6,15,.42) 45%,var(--bg))}
.ab-pulse{stroke-dasharray:70 1200;stroke-dashoffset:1270;filter:drop-shadow(0 0 6px rgba(0,200,255,.7));animation:cbFlow 4.6s linear infinite}
.ab-pulse--back{animation-duration:5.4s;animation-delay:1.6s;filter:drop-shadow(0 0 6px rgba(167,139,250,.6))}

.ahero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.ahero-copy .lead{max-width:60ch}
.lead--justify{text-align:justify;text-justify:inter-word}
.ahero-visual{position:relative;padding:18px;border-radius:24px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(160deg,rgba(30,50,120,.30),rgba(120,40,160,.15));backdrop-filter:blur(5px);
  box-shadow:0 40px 90px -60px rgba(80,130,255,.9)}
.hv-art{width:100%;height:auto;display:block;border-radius:18px;border:1px solid var(--line);
  background:radial-gradient(120% 100% at 50% 30%,rgba(12,32,62,.85),rgba(4,6,18,.78))}

.hv-cell{fill:rgba(8,20,42,.72);stroke:url(#hvLine);stroke-width:1.5}
.hv-node{transform-box:fill-box;transform-origin:center;animation:hvPulse 4.4s ease-in-out infinite}
.hv-node--core .hv-cell{stroke-width:2.1;fill:rgba(12,34,66,.9);filter:drop-shadow(0 0 14px rgba(0,200,255,.5))}
.hv-node--t{opacity:.75}
@keyframes hvPulse{0%,100%{opacity:.72;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.hv-spark{stroke-dasharray:24 200;stroke-dashoffset:224;filter:drop-shadow(0 0 6px rgba(0,220,255,.85));
  animation:hvSpark 3.4s linear infinite}
@keyframes hvSpark{to{stroke-dashoffset:0}}
.hv-ring{fill:none;stroke:#4de4ff;stroke-width:1.4;transform-box:fill-box;transform-origin:center;opacity:0;
  animation:hvRing 3.8s ease-out infinite}
.hv-ring--2{stroke:#a78bfa;animation-delay:1.9s}
@keyframes hvRing{0%{transform:scale(.6);opacity:.8}70%{opacity:.18}100%{transform:scale(2.3);opacity:0}}

@media (max-width:980px){
  .ahero-grid{grid-template-columns:1fr;gap:34px}
  .page-hero--about{padding:126px 0 44px}
}
@media (prefers-reduced-motion:reduce){
  .hv-node,.hv-spark,.hv-ring,.ab-pulse{animation:none}
}


/* ---- level 1 hero with structural lab ---- */
.page-hero--lab{overflow:hidden}
.page-hero--lab .plhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:34px;align-items:center}
.page-hero--lab .lead{max-width:none}
.page-hero--lab .facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px
}
.page-hero--lab .facts span{width:100%;justify-content:center}
.lab--hero{grid-template-columns:1fr;gap:18px;padding:18px;border-radius:24px}
.lab--hero .lab-stage{order:-1;min-height:340px;perspective-origin:50% 65%}
.lab--hero[data-mode="torsion"] .tower,
.lab--hero[data-mode="drift"] .tower{
  top:62%;
  transform:translate(-50%,-50%) rotateX(64deg) rotateZ(var(--spin,-26deg)) scale(.86)
}
.lab--hero .lab-side{padding:0;gap:14px}
.lab--hero .lab-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lab--hero .lab-tab{padding:9px 12px;font-size:.86rem}
.lab--hero .lab-copy{min-height:86px}
.lab--hero .lab-copy h3{font-size:1.02rem}
.lab--hero .lab-copy p{font-size:.88rem}
.lab--hero .ro b{font-size:.98rem}
@media (max-width:980px){
  .page-hero--lab .plhero{grid-template-columns:1fr}
  .lab--hero .lab-stage{min-height:320px}
}

/* ---- plugin card title + material tag ---- */
.card-titlerow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.card-titlerow h3{margin:0}
.card-titlerow .tag{margin-inline-start:0}

/* ---- level 2 hero facts (2x2) ---- */
.page-hero--l2 .facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px
}
.page-hero--l2 .facts span{width:100%;justify-content:center}

/* ---- spec table: less transparency + alignment ---- */
.spec{background:rgba(9,11,24,.94)}
.spec thead th{background:rgba(255,255,255,.07);text-align:center}
.spec td{text-align:right}

/* =========================================================
   level 2 hero — one model → chained controls → unified report
   ========================================================= */
.page-hero--l2{overflow:hidden}
.page-hero--l2 .l2hero{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.page-hero--l2 .l2hero .lead{max-width:60ch}
.l2hero-visual{position:relative;padding:18px;border-radius:24px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(160deg,rgba(30,50,120,.30),rgba(120,40,160,.15));backdrop-filter:blur(5px);
  box-shadow:0 40px 90px -60px rgba(80,130,255,.9)}
.l2-art{width:100%;height:auto;display:block;border-radius:18px;border:1px solid var(--line);
  background:radial-gradient(120% 100% at 50% 30%,rgba(12,32,62,.85),rgba(4,6,18,.78))}
.l2-box{fill:rgba(8,20,42,.72);stroke:url(#l2Line);stroke-width:1.5}
.l2-box--hl{stroke-width:2.1;fill:rgba(12,34,66,.9);filter:drop-shadow(0 0 14px rgba(0,200,255,.45))}
.l2-cap{fill:#9fd8f5;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.14em}
.l2-k{fill:#cdeeff;font-family:"Space Grotesk",sans-serif;font-size:13px;letter-spacing:.1em}
.l2-pulse{stroke-dasharray:56 1400;stroke-dashoffset:1456;filter:drop-shadow(0 0 6px rgba(0,220,255,.85))}
.l2-art.is-running .l2-pulse{animation:l2Flow 7.2s linear 1 forwards}
@keyframes l2Flow{0%{stroke-dashoffset:1456;opacity:1}90%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}

/* check nodes: pending marker by default, tick + green once the flow passes */
.l2-check{transform-box:fill-box;transform-origin:center;opacity:.7;
  transition:opacity .45s var(--ease,ease),transform .45s var(--ease,ease)}
.l2-check.is-done{opacity:1;transform:translateY(-3px)}
.l2-cbox{transition:stroke .4s ease,filter .4s ease}
.l2-check.is-done .l2-cbox{stroke:var(--ok);filter:drop-shadow(0 0 12px color-mix(in srgb,var(--ok) 55%,transparent))}
.l2-check.is-done .l2-k{fill:var(--ok)}
.l2-wait{fill:none;stroke:#9fd8f5;stroke-width:1.8;stroke-linecap:round;opacity:.8;
  transition:opacity .3s ease}
.l2-check.is-done .l2-wait{opacity:0}
.l2-tick{fill:none;stroke:var(--ok);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:34;stroke-dashoffset:34;opacity:0}
.l2-check.is-done .l2-tick{opacity:1;animation:l2Tick .48s ease-out forwards}
@keyframes l2Tick{to{stroke-dashoffset:0}}

/* unified report */
.l2-rows{stroke:#cdeeff}
.l2-row{stroke-dasharray:80;stroke-dashoffset:80}
.l2-report.is-writing .l2-row{animation:l2Row .6s ease-out forwards}
.l2-report.is-writing .l2-row:nth-child(2){animation-delay:.16s}
.l2-report.is-writing .l2-row:nth-child(3){animation-delay:.32s}
.l2-report.is-writing .l2-row:nth-child(4){animation-delay:.48s}
.l2-report.is-writing .l2-row:nth-child(5){animation-delay:.64s}
@keyframes l2Row{to{stroke-dashoffset:0}}
.l2-rbox{transition:stroke .5s ease,filter .5s ease}
.l2-report.is-passed .l2-rbox{stroke:var(--ok);
  filter:drop-shadow(0 0 16px color-mix(in srgb,var(--ok) 55%,transparent))}
.l2-report.is-passed .l2-rows{stroke:color-mix(in srgb,var(--ok) 70%,#cdeeff)}
.l2-cap--check,.l2-cap--passed{transition:opacity .4s ease}
.l2-cap--passed{opacity:0;fill:var(--ok)}
.l2-report.is-passed .l2-cap--check{opacity:0}
.l2-report.is-passed .l2-cap--passed{opacity:1}
.l2-ring{fill:none;stroke:var(--ok);stroke-width:1.3;transform-box:fill-box;transform-origin:center;opacity:0}
.l2-report.is-passed .l2-ring{animation:l2Ring 1.5s ease-out 2}
@keyframes l2Ring{0%{transform:scale(.62);opacity:.75}70%{opacity:.15}100%{transform:scale(1.5);opacity:0}}
.l2-model{animation:l2Breath 5.2s ease-in-out infinite}
@keyframes l2Breath{0%,100%{opacity:.82}50%{opacity:1}}

@media (max-width:980px){
  .page-hero--l2 .l2hero{grid-template-columns:1fr;gap:34px}
}
@media (prefers-reduced-motion:reduce){
  .l2-pulse,.l2-tick,.l2-row,.l2-ring,.l2-model{animation:none}
  .l2-tick,.l2-row{stroke-dashoffset:0}
}

/* =========================================================
   level 3 hero — optimization loop: candidates → convergence → best design
   ========================================================= */
.page-hero--l3{overflow:hidden}
.page-hero--l3 .l3hero{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.page-hero--l3 .l3hero .lead{max-width:60ch}
.page-hero--l3 .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}
.page-hero--l3 .facts span{width:100%;justify-content:center}
.l3hero-visual{position:relative;padding:18px;border-radius:24px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(160deg,rgba(30,50,120,.30),rgba(120,40,160,.15));backdrop-filter:blur(5px);
  box-shadow:0 40px 90px -60px rgba(80,130,255,.9)}
.l3-art{width:100%;height:auto;display:block;border-radius:18px;border:1px solid var(--line);
  background:radial-gradient(120% 100% at 50% 30%,rgba(12,32,62,.85),rgba(4,6,18,.78))}
.l3-axes path{fill:none;stroke:rgba(190,220,255,.35);stroke-width:1.2}
.l3-axes .l3-gridline{stroke:rgba(190,220,255,.12);stroke-dasharray:4 8}
.l3-cap{direction:ltr;fill:#9fd8f5;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.14em}
.l3-cloud circle{fill:#7ff0ff;opacity:0;animation:l3Dot 7.4s ease-out infinite}
.l3-cloud circle:nth-child(1){animation-delay:.2s}
.l3-cloud circle:nth-child(2){animation-delay:.9s}
.l3-cloud circle:nth-child(3){animation-delay:1.3s}
.l3-cloud circle:nth-child(4){animation-delay:1.9s}
.l3-cloud circle:nth-child(5){animation-delay:2.4s}
.l3-cloud circle:nth-child(6){animation-delay:3s}
.l3-cloud circle:nth-child(7){animation-delay:3.5s}
.l3-cloud circle:nth-child(8){animation-delay:4.1s}
.l3-cloud circle:nth-child(9){animation-delay:4.7s}
.l3-cloud circle:nth-child(10){animation-delay:5.3s}
@keyframes l3Dot{0%{opacity:0;transform:translateY(-10px)}12%{opacity:.95}70%{opacity:.35}100%{opacity:0}}
.l3-curve{fill:none;stroke:url(#l3Curve);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:520;stroke-dashoffset:520;filter:drop-shadow(0 0 8px rgba(0,220,255,.45));
  animation:l3Draw 7.4s linear infinite}
@keyframes l3Draw{0%{stroke-dashoffset:520}86%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.l3-runner{fill:#eaffff;filter:drop-shadow(0 0 10px rgba(120,240,255,.9))}
.l3-sec{transform-box:fill-box;transform-origin:center;animation:l3Sec 7.4s ease-in-out infinite;
  animation-delay:calc(var(--i) * .55s)}
.l3-sec rect{fill:rgba(8,20,42,.72);stroke:url(#l3Line);stroke-width:1.5}
.l3-sec path{fill:none;stroke:#9fd8f5;stroke-width:1.2;opacity:.7}
@keyframes l3Sec{0%,100%{opacity:.35}18%{opacity:1}60%{opacity:.6}}
.l3-sec--best rect{stroke:var(--ok);filter:drop-shadow(0 0 12px color-mix(in srgb,var(--ok) 55%,transparent))}
.l3-sec--best path{stroke:var(--ok)}
.l3-badge{opacity:0;animation:l3Badge 7.4s ease-out infinite}
.l3-badge rect{fill:rgba(12,34,66,.9);stroke:var(--ok);stroke-width:1.6;
  filter:drop-shadow(0 0 16px color-mix(in srgb,var(--ok) 45%,transparent))}
.l3-badge-k{fill:var(--ok);font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.16em}
.l3-badge-v{fill:#eaffff;font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:.1em}
@keyframes l3Badge{0%,60%{opacity:0}72%{opacity:1}95%{opacity:1}100%{opacity:0}}

@media (max-width:980px){
  .page-hero--l3 .l3hero{grid-template-columns:1fr;gap:34px}
}
@media (prefers-reduced-motion:reduce){
  .l3-curve,.l3-sec,.l3-badge,.l3-cloud circle{animation:none}
  .l3-curve{stroke-dashoffset:0}
  .l3-badge,.l3-cloud circle{opacity:1}
  .l3-runner{display:none}
}

/* =========================================================
   level 4 hero — natural language → parameters → automatic chain
   ========================================================= */
.page-hero--l4{overflow:hidden}
.page-hero--l4 .l4hero{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.page-hero--l4 .l4hero .lead{max-width:60ch}
.page-hero--l4 .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}
.page-hero--l4 .facts span{width:100%;justify-content:center}
.l4hero-visual{position:relative;padding:18px;border-radius:24px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(160deg,rgba(30,50,120,.30),rgba(120,40,160,.15));backdrop-filter:blur(5px);
  box-shadow:0 40px 90px -60px rgba(80,130,255,.9)}
.l4-art{width:100%;height:auto;display:block;border-radius:18px;border:1px solid var(--line);
  background:radial-gradient(120% 100% at 50% 30%,rgba(12,32,62,.85),rgba(4,6,18,.78))}
.l4-cap{direction:ltr;fill:#9fd8f5;font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:.14em}
.l4-bubble rect{fill:rgba(10,24,50,.82);stroke:url(#l4Line);stroke-width:1.4}
.l4-bubble .l4-line{stroke:#9fd8f5;stroke-width:2.6;stroke-linecap:round;opacity:.55;
  stroke-dasharray:120;stroke-dashoffset:120;animation:l4Type 9s linear infinite}
.l4-bubble .l4-line:nth-of-type(2){animation-delay:.35s}
.l4-bubble .l4-line:nth-of-type(3){animation-delay:.7s}
@keyframes l4Type{0%{stroke-dashoffset:120}14%{stroke-dashoffset:0}90%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.l4-param{opacity:0;animation:l4Param 9s ease-out infinite;animation-delay:calc(1.1s + var(--i) * .32s)}
.l4-param rect{fill:rgba(8,20,42,.78);stroke:rgba(140,200,255,.5);stroke-width:1.2}
.l4-param text{direction:ltr;fill:#dff2ff;font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:.08em}
@keyframes l4Param{0%,10%{opacity:0;transform:translateY(-6px)}22%{opacity:1;transform:translateY(0)}92%{opacity:1}100%{opacity:0}}
.l4-flow{fill:none;stroke:rgba(190,220,255,.28);stroke-width:1.3;stroke-dasharray:5 7}
.l4-spark{fill:#eaffff;filter:drop-shadow(0 0 9px rgba(120,240,255,.9))}
.l4-stage rect{fill:rgba(8,20,42,.72);stroke:rgba(140,200,255,.35);stroke-width:1.4}
.l4-stage text{direction:ltr;fill:#9fd8f5;font-family:"Space Grotesk",sans-serif;font-size:10px;letter-spacing:.12em}
.l4-stage{animation:l4Stage 9s ease-in-out infinite;animation-delay:calc(2.6s + var(--i) * .62s)}
@keyframes l4Stage{0%,6%{opacity:.4}14%{opacity:1}100%{opacity:1}}
.l4-stage-fill{fill:none;stroke:var(--ok);stroke-width:1.8;stroke-dasharray:210;stroke-dashoffset:210;
  animation:l4Fill 9s linear infinite;animation-delay:calc(2.6s + var(--i) * .62s);
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--ok) 45%,transparent))}
@keyframes l4Fill{0%{stroke-dashoffset:210}8%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.l4-report{opacity:0;animation:l4Report 9s ease-out infinite}
.l4-report rect{fill:rgba(12,34,66,.9);stroke:var(--ok);stroke-width:1.6;
  filter:drop-shadow(0 0 16px color-mix(in srgb,var(--ok) 45%,transparent))}
.l4-report .l4-report-k{fill:var(--ok);font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.16em;direction:ltr}
.l4-report .l4-report-v{fill:#eaffff;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.1em;direction:ltr}
@keyframes l4Report{0%,66%{opacity:0}74%{opacity:1}96%{opacity:1}100%{opacity:0}}
@media (max-width:980px){
  .page-hero--l4 .l4hero{grid-template-columns:1fr;gap:34px}
}
@media (prefers-reduced-motion:reduce){
  .l4-bubble .l4-line,.l4-param,.l4-stage,.l4-stage-fill,.l4-report{animation:none}
  .l4-bubble .l4-line,.l4-stage-fill{stroke-dashoffset:0}
  .l4-param,.l4-report{opacity:1}
  .l4-spark{display:none}
}

/* =========================================================
   Optis_IS hero — tapered portal frame + plate bank search
   ========================================================= */
.page-hero--is{overflow:hidden}
.page-hero--is .ishero{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.page-hero--is .ishero .lead{max-width:60ch}
.page-hero--is .page-title{line-height:1.35}
.page-hero--is .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}
.page-hero--is .facts span{width:100%;justify-content:center}
.ishero-visual{position:relative;padding:18px;border-radius:24px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(160deg,rgba(30,50,120,.30),rgba(120,40,160,.15));backdrop-filter:blur(5px);
  box-shadow:0 40px 90px -60px rgba(80,130,255,.9)}
.is-art{width:100%;height:auto;display:block;border-radius:18px;border:1px solid var(--line);
  background:radial-gradient(120% 100% at 50% 30%,rgba(12,32,62,.85),rgba(4,6,18,.78))}
.is-cap{direction:ltr;fill:#9fd8f5;font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:.14em}
.is-ground{fill:none;stroke:rgba(190,220,255,.3);stroke-width:1.2;stroke-dasharray:5 7}
.is-frame path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.is-frame--init path{stroke:rgba(190,220,255,.22);stroke-width:1.4;stroke-dasharray:4 6}
.is-frame--opt .is-draw{stroke:url(#isLine);stroke-width:2.4;
  filter:drop-shadow(0 0 8px rgba(0,200,255,.4));
  stroke-dasharray:760;stroke-dashoffset:760;animation:isDraw 8.4s linear infinite}
.is-frame--opt .is-draw--in{animation-delay:.35s}
.is-frame--opt .is-web{stroke:rgba(140,200,255,.35);stroke-width:1.1;stroke-dasharray:3 6;
  opacity:0;animation:isFade 8.4s ease-out infinite;animation-delay:1.4s}
@keyframes isDraw{0%{stroke-dashoffset:760}34%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes isFade{0%,14%{opacity:0}26%{opacity:1}100%{opacity:1}}
.is-purlins circle{fill:#7ff0ff;opacity:0;animation:isDot 8.4s ease-out infinite;
  animation-delay:calc(1.6s + var(--i) * .16s)}
@keyframes isDot{0%,16%{opacity:0}26%{opacity:.95}100%{opacity:.5}}
.is-sec rect{fill:rgba(8,20,42,.8);stroke:url(#isLine);stroke-width:1.4;
  animation:isSec 8.4s ease-in-out infinite}
.is-sec .is-dim{fill:none;stroke:rgba(190,220,255,.4);stroke-width:1}
.is-key{direction:ltr;fill:#9fd8f5;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:0}
@keyframes isSec{0%,100%{opacity:.55}30%{opacity:1}}
.is-plate rect{fill:rgba(8,20,42,.78);stroke:rgba(140,200,255,.4);stroke-width:1.2}
.is-plate text{direction:ltr;fill:#dff2ff;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.06em}
.is-plate{animation:isScan 8.4s ease-in-out infinite;animation-delay:calc(2.2s + var(--i) * .5s)}
@keyframes isScan{0%,18%{opacity:.45}26%{opacity:1}40%{opacity:.55}100%{opacity:.55}}
.is-plate:nth-of-type(3){animation-name:isPick}
@keyframes isPick{0%,18%{opacity:.45}26%{opacity:1}100%{opacity:1}}
.is-plate:nth-of-type(3) rect{stroke:var(--ok);
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--ok) 50%,transparent))}
.is-badge{opacity:0;animation:isBadge 8.4s ease-out infinite}
.is-badge rect{fill:rgba(12,34,66,.9);stroke:var(--ok);stroke-width:1.6;
  filter:drop-shadow(0 0 16px color-mix(in srgb,var(--ok) 45%,transparent))}
.is-badge-k{fill:var(--ok);font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:.14em;direction:ltr}
.is-badge-v{fill:#eaffff;font-family:"Space Grotesk",sans-serif;font-size:11.5px;letter-spacing:.1em;direction:ltr}
@keyframes isBadge{0%,62%{opacity:0}72%{opacity:1}96%{opacity:1}100%{opacity:0}}
@media (max-width:980px){
  .page-hero--is .ishero{grid-template-columns:1fr;gap:34px}
}
@media (prefers-reduced-motion:reduce){
  .is-frame--opt .is-draw,.is-frame--opt .is-web,.is-purlins circle,.is-sec rect,.is-plate,.is-badge{animation:none}
  .is-frame--opt .is-draw{stroke-dashoffset:0}
  .is-frame--opt .is-web,.is-purlins circle,.is-badge{opacity:1}
}

/* compact screenshot grid (wide thumbnails, open in lightbox) */
.shots--sm{grid-template-columns:repeat(5,1fr);gap:14px}
.shots--sm .shot img{height:auto;aspect-ratio:16/10;object-fit:contain;object-position:center;
  background:radial-gradient(120% 100% at 50% 30%,rgba(12,32,62,.85),rgba(4,6,18,.9))}
.shots--sm .shot figcaption{padding:10px 12px;font-size:.78rem;line-height:1.5}
@media (max-width:1100px){.shots--sm{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.shots--sm{grid-template-columns:repeat(2,1fr)}}

/* lightbox image must stay visible (global img fade-in does not reach it) */
.lightbox img{opacity:1;transform:none}

/* 2x2 equal-width chips (When is this product suitable?) */
.chips--2x2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
.chips--2x2 span{justify-self:stretch;text-align:center;width:100%;box-sizing:border-box}
@media (max-width:560px){.chips--2x2{grid-template-columns:1fr}}

/* ---------- Optis_Building-Steel hero (2 columns + animated art) ---------- */
.page-hero--st{overflow:hidden}
.page-hero--st .sthero{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.page-hero--st .sthero .lead{max-width:60ch}
.page-hero--st .page-title{line-height:1.35}
.page-hero--st .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}
.page-hero--st .facts span{width:100%;justify-content:center}
.sthero-visual{position:relative;padding:18px;border-radius:24px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(160deg,rgba(30,50,120,.30),rgba(120,40,160,.15));backdrop-filter:blur(5px);
  box-shadow:0 40px 90px -60px rgba(80,130,255,.9)}
.st-art{width:100%;height:auto;display:block;border-radius:18px;border:1px solid var(--line);
  background:radial-gradient(120% 100% at 50% 30%,rgba(12,32,62,.85),rgba(4,6,18,.78))}
.st-cap{direction:ltr;fill:#9fd8f5;font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:.14em}
.st-key{direction:ltr;fill:#9fd8f5;font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:.08em}
.st-ground{fill:none;stroke:rgba(190,220,255,.3);stroke-width:1.2;stroke-dasharray:5 7}
.st-frame path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.st-frame--init path{stroke:rgba(190,220,255,.22);stroke-width:1.4;stroke-dasharray:4 6}
/* All hero animations share one 8.4s timeline (no per-element delays),
   so the loop restarts as a clean slate instead of rewinding step by step.
   Every element fades out between 86% and 93% and stays hidden to 100%. */
.st-frame--opt .st-draw{stroke:url(#stLine);stroke-width:2.4;
  filter:drop-shadow(0 0 8px rgba(0,200,255,.4));
  stroke-dasharray:900;stroke-dashoffset:900;animation:stDraw 8.4s linear infinite}
.st-frame--opt .st-draw--in{animation-name:stDrawIn}
.st-frame--opt .st-brace{stroke:rgba(140,200,255,.4);stroke-width:1.1;stroke-dasharray:3 6;
  opacity:0;animation:stBrace 8.4s ease-out infinite}
@keyframes stDraw{0%{stroke-dashoffset:900;opacity:1}30%{stroke-dashoffset:0}86%{stroke-dashoffset:0;opacity:1}93%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes stDrawIn{0%,4%{stroke-dashoffset:900;opacity:1}34%{stroke-dashoffset:0}86%{stroke-dashoffset:0;opacity:1}93%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes stBrace{0%,15%{opacity:0}24%{opacity:1}86%{opacity:1}93%,100%{opacity:0}}
.st-drift path{fill:none;stroke:#7ff0ff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;animation:stDrift 8.4s ease-out infinite}
@keyframes stDrift{0%,20%{opacity:0}28%{opacity:.95}86%{opacity:.5}93%,100%{opacity:0}}
.st-drift text{opacity:0;animation:stFadeTxt 8.4s ease-out infinite}
@keyframes stFadeTxt{0%,30%{opacity:0}38%{opacity:1}86%{opacity:1}93%,100%{opacity:0}}
.st-chip rect{fill:rgba(8,20,42,.78);stroke:rgba(140,200,255,.4);stroke-width:1.2}
.st-chip text{direction:ltr;fill:#dff2ff;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.06em}
.st-chip{opacity:0;animation:stScan 8.4s ease-in-out infinite}
@keyframes stScan{0%,26%{opacity:0}34%{opacity:.45}42%{opacity:1}54%{opacity:.55}86%{opacity:.55}93%,100%{opacity:0}}
.st-chip:nth-of-type(3){animation-name:stPick}
@keyframes stPick{0%,26%{opacity:0}34%{opacity:.45}44%{opacity:1}86%{opacity:1}93%,100%{opacity:0}}
.st-chip:nth-of-type(3) rect{stroke:var(--ok);
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--ok) 50%,transparent))}
.st-sec rect{fill:rgba(8,20,42,.8);stroke:url(#stLine);stroke-width:1.4;opacity:0;animation:stSec 8.4s ease-in-out infinite}
.st-sec .st-dim{fill:none;stroke:rgba(190,220,255,.4);stroke-width:1}
@keyframes stSec{0%,30%{opacity:0}40%{opacity:.55}52%{opacity:1}86%{opacity:1}93%,100%{opacity:0}}
.st-badge{opacity:0;animation:stBadge 8.4s ease-out infinite}
.st-badge rect{fill:rgba(12,34,66,.9);stroke:var(--ok);stroke-width:1.6;
  filter:drop-shadow(0 0 16px color-mix(in srgb,var(--ok) 45%,transparent))}
.st-badge-k{fill:var(--ok);font-family:"Space Grotesk",sans-serif;font-size:9.5px;letter-spacing:.1em;direction:ltr}
.st-badge-v{fill:#eaffff;font-family:"Space Grotesk",sans-serif;font-size:11.5px;letter-spacing:.1em;direction:ltr}
@keyframes stBadge{0%,62%{opacity:0}72%{opacity:1}86%{opacity:1}93%,100%{opacity:0}}
@media (max-width:980px){
  .page-hero--st .sthero{grid-template-columns:1fr;gap:34px}
}
@media (prefers-reduced-motion:reduce){
  .st-frame--opt .st-draw,.st-frame--opt .st-brace,.st-drift path,.st-drift text,.st-chip,.st-sec rect,.st-badge{animation:none}
  .st-frame--opt .st-draw{stroke-dashoffset:0}
  .st-frame--opt .st-brace,.st-drift path,.st-drift text,.st-chip,.st-sec rect,.st-badge{opacity:1}
}

/* lightbox: keep image visible regardless of global image fade-in */
.lightbox img,.lightbox img.loaded{opacity:1!important;transform:none!important;visibility:visible}

/* ---------- Optis_Building-Concrete hero (2 columns + animated art) ---------- */
.page-hero--cn{overflow:hidden}
.page-hero--cn .cnhero{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.page-hero--cn .cnhero .lead{max-width:60ch}
.page-hero--cn .page-title{line-height:1.35}
.page-hero--cn .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}
.page-hero--cn .facts span{width:100%;justify-content:center}
.cnhero-visual{position:relative;padding:18px;border-radius:24px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(160deg,rgba(30,50,120,.30),rgba(120,40,160,.15));backdrop-filter:blur(5px);
  box-shadow:0 40px 90px -60px rgba(80,130,255,.9)}
.cn-art{width:100%;height:auto;display:block;border-radius:18px;border:1px solid var(--line);
  background:radial-gradient(120% 100% at 50% 30%,rgba(12,32,62,.85),rgba(4,6,18,.78))}
.cn-cap{direction:ltr;fill:#9fd8f5;font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:.14em}
.cn-key{direction:ltr;fill:#9fd8f5;font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:.08em}
.cn-ground{fill:none;stroke:rgba(190,220,255,.3);stroke-width:1.2;stroke-dasharray:5 7}
.cn-frame path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.cn-frame--init path{stroke:rgba(190,220,255,.22);stroke-width:1.4;stroke-dasharray:4 6}
/* one shared 8.4s timeline (same rhythm as the other product heroes) */
.cn-frame--opt .cn-draw{stroke:url(#cnLine);stroke-width:8;stroke-opacity:.85;
  filter:drop-shadow(0 0 8px rgba(0,200,255,.35));
  stroke-dasharray:900;stroke-dashoffset:900;animation:cnDraw 8.4s linear infinite}
.cn-frame--opt .cn-draw--in{stroke-width:6;animation-name:cnDrawIn}
@keyframes cnDraw{0%{stroke-dashoffset:900;opacity:1}30%{stroke-dashoffset:0}86%{stroke-dashoffset:0;opacity:1}93%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes cnDrawIn{0%,4%{stroke-dashoffset:900;opacity:1}34%{stroke-dashoffset:0}86%{stroke-dashoffset:0;opacity:1}93%,100%{stroke-dashoffset:0;opacity:0}}
.cn-rebar path{fill:none;stroke:#7ff0ff;stroke-width:1.2;stroke-linecap:round;opacity:0;
  stroke-dasharray:260;stroke-dashoffset:260;animation:cnRebar 8.4s ease-out infinite}
.cn-rebar .cn-tie{stroke:rgba(167,139,250,.85);stroke-width:1;stroke-dasharray:150;stroke-dashoffset:150;
  animation-name:cnTie}
@keyframes cnRebar{0%,22%{opacity:0;stroke-dashoffset:260}32%{opacity:.9;stroke-dashoffset:0}86%{opacity:.9;stroke-dashoffset:0}93%,100%{opacity:0}}
@keyframes cnTie{0%,30%{opacity:0;stroke-dashoffset:150}42%{opacity:.85;stroke-dashoffset:0}86%{opacity:.85;stroke-dashoffset:0}93%,100%{opacity:0}}
.cn-joint rect{fill:none;stroke:var(--ok);stroke-width:1.6;opacity:0;
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--ok) 50%,transparent));
  animation:cnJoint 8.4s ease-out infinite}
.cn-joint text{opacity:0;animation:cnFadeTxt 8.4s ease-out infinite}
@keyframes cnJoint{0%,44%{opacity:0}54%{opacity:1}70%{opacity:.6}86%{opacity:1}93%,100%{opacity:0}}
@keyframes cnFadeTxt{0%,48%{opacity:0}58%{opacity:1}86%{opacity:1}93%,100%{opacity:0}}
.cn-bank text.cn-cap{opacity:0;animation:cnFadeTxt 8.4s ease-out infinite}
.cn-chip rect{fill:rgba(8,20,42,.78);stroke:rgba(140,200,255,.4);stroke-width:1.2}
.cn-chip text{direction:ltr;fill:#dff2ff;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.06em}
.cn-chip{opacity:0;animation:cnScan 8.4s ease-in-out infinite}
@keyframes cnScan{0%,26%{opacity:0}34%{opacity:.45}42%{opacity:1}54%{opacity:.55}86%{opacity:.55}93%,100%{opacity:0}}
.cn-chip:nth-of-type(3){animation-name:cnPick}
@keyframes cnPick{0%,26%{opacity:0}34%{opacity:.45}44%{opacity:1}86%{opacity:1}93%,100%{opacity:0}}
.cn-chip:nth-of-type(3) rect{stroke:var(--ok);
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--ok) 50%,transparent))}
.cn-sec{opacity:0;animation:cnSec 8.4s ease-in-out infinite}
.cn-sec .cn-sec-out{fill:rgba(8,20,42,.8);stroke:url(#cnLine);stroke-width:1.6}
.cn-sec .cn-sec-tie{fill:none;stroke:rgba(167,139,250,.9);stroke-width:1.1}
.cn-sec .cn-bar{fill:#7ff0ff;stroke:none}
.cn-sec .cn-dim{fill:none;stroke:rgba(190,220,255,.4);stroke-width:1}
@keyframes cnSec{0%,30%{opacity:0}40%{opacity:.55}52%{opacity:1}86%{opacity:1}93%,100%{opacity:0}}
.cn-badge{opacity:0;animation:cnBadge 8.4s ease-out infinite}
.cn-badge rect{fill:rgba(12,34,66,.9);stroke:var(--ok);stroke-width:1.6;
  filter:drop-shadow(0 0 16px color-mix(in srgb,var(--ok) 45%,transparent))}
.cn-badge-k{fill:var(--ok);font-family:"Space Grotesk",sans-serif;font-size:9.5px;letter-spacing:.1em;direction:ltr}
.cn-badge-v{fill:#eaffff;font-family:"Space Grotesk",sans-serif;font-size:11.5px;letter-spacing:.1em;direction:ltr}
@keyframes cnBadge{0%,62%{opacity:0}72%{opacity:1}86%{opacity:1}93%,100%{opacity:0}}
@media (max-width:980px){
  .page-hero--cn .cnhero{grid-template-columns:1fr;gap:34px}
}
@media (prefers-reduced-motion:reduce){
  .cn-frame--opt .cn-draw,.cn-rebar path,.cn-joint rect,.cn-joint text,.cn-bank text.cn-cap,.cn-chip,.cn-sec,.cn-badge{animation:none}
  .cn-frame--opt .cn-draw,.cn-rebar path{stroke-dashoffset:0}
  .cn-rebar path,.cn-joint rect,.cn-joint text,.cn-bank text.cn-cap,.cn-chip,.cn-sec,.cn-badge{opacity:1}
}

@media (max-width:1000px){.brand-logo{width:52px;height:52px}}