/* ============================================================
   Optronix Resources — light theme, scoped under .res so it
   never collides with the site's dark global header/footer CSS.
   Type: Google Sans (matches the rest of the site); navy #363757 /
   purple #6B6DC8 accents. Loaded after main.css + components.css.
   ============================================================ */

.res{
  --navy:#363757; --bar:#2C2D3E; --purple:#6B6DC8; --purple-d:#5557B0; --ink:#1E1E2E;
  --alt:#F0F0F6; --line:#E3E3EE; --dline:#3A3B52; --dim:#6E6E82; --warm:#FAFAFC;
  --green:#3F7D56; --amber:#B0863A; --red:#A23B34;
  --rfont:'Google Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-family:var(--rfont); color:var(--ink); line-height:1.55;
}
/* light page background on resource pages only */
body.res-page{background:#fff;}
/* Header + footer are now unified site-wide in main.css (near-opaque dark that
   works over both the dark site and these light pages) — no resource-only override needed. */
.res *{box-sizing:border-box;}
.res .wrap{max-width:1100px;margin:0 auto;padding:0 28px;}
.res a{color:var(--purple-d);}

/* hero band (dark, sits under the dark site header) */
.res .r-hero{background:radial-gradient(1100px 480px at 78% -10%, #2B2C3A 0%, #1F2028 60%);color:#fff;}
.res .r-hero .wrap{padding:150px 28px 44px;}
/* offset anchor jumps for the fixed header + sticky section nav */
html{scroll-padding-top:150px;}
.res .r-hero h1{font-size:clamp(30px,4.6vw,52px);font-weight:500;letter-spacing:-0.02em;line-height:1.12;color:#fff;}
.res .r-hero h1 em{font-style:normal;color:var(--purple);filter:brightness(1.35);}
.res .kicker{display:inline-block;background:var(--purple);color:#fff;font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;padding:6px 14px;border-radius:4px;margin-bottom:18px;}
.res .r-hero p.sub{margin-top:18px;color:#C9C9DC;font-size:17px;}
.res .r-hero .meta{margin-top:24px;color:#8A8AA1;font-size:13px;}
/* LinkedIn share — fixed side rail + in-content button */
.res .li-rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:40;width:46px;height:46px;border-radius:12px;background:#0A66C2;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.28);transition:background .15s ease,transform .15s ease;}
.res .li-rail:hover{background:#0950a0;transform:translateY(-50%) scale(1.07);}
.res .li-rail svg{width:22px;height:22px;}
@media(max-width:860px){.res .li-rail{display:none;}}
.res .li-share{display:inline-flex;align-items:center;gap:9px;background:#0A66C2;color:#fff;text-decoration:none;font-size:14px;font-weight:600;padding:10px 18px;border-radius:8px;transition:background .15s ease;}
.res .li-share:hover{background:#0950a0;}
.res .li-share svg{flex:0 0 auto;}
/* end-of-article share prompt */
.res .share-foot{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:36px;flex-wrap:wrap;}
.res .share-foot span{color:var(--dim);font-size:14.5px;font-weight:600;}

/* stat band (dark) */
.res .statband{background:var(--bar);color:#fff;padding:30px 0;border-top:1px solid var(--dline);}
.res .statband .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px;}
.res .stat .n{font-size:30px;font-weight:700;color:#fff;line-height:1.1;}
.res .stat .n small{font-size:16px;font-weight:700;color:var(--purple);filter:brightness(1.4);}
.res .stat .l{font-size:12.5px;color:#A9A9C0;margin-top:5px;line-height:1.35;}

/* sections */
.res section{padding:42px 0 22px;}
/* The site pads the first <section> by 240px and margins every section by 100px to
   clear its fixed header — but our dark hero/stat band already do that. Neutralise
   both on resource pages so spacing is controlled by .res section above. */
body.res-page main.res section{margin-top:0 !important;}
body.res-page main.res section:first-of-type:not(.hero-centered){padding-top:42px !important;}
.res .slabel{color:var(--purple);font-weight:700;font-size:13.5px;letter-spacing:1.2px;text-transform:uppercase;}
.res h2{font-size:30px;font-weight:600;letter-spacing:-0.01em;color:var(--navy);margin:6px 0 10px;}
.res h3{font-weight:600;}
/* the site forces heading colour to white !important for its dark theme; on our
   light pages headings must be dark. Force navy, then restore white only for the
   headings that genuinely sit on dark backgrounds (hero, CTA, pricing scenario). */
.res h1,.res h2,.res h3,.res h4{color:var(--navy) !important;}
.res .r-hero h1,.res .cta h2,.res .scenario h3{color:#fff !important;}
.res .rule{width:64px;height:4px;background:var(--purple);border-radius:2px;margin:14px 0 22px;}
.res .lede{color:#3c3c50;font-size:16.5px;}
.res .note{font-size:13px;color:var(--dim);font-style:italic;margin-top:14px;}

/* timeline */
.res .timeline{margin-top:38px;position:relative;padding-left:26px;border-left:3px solid var(--line);}
.res .tl{position:relative;padding:0 0 30px 22px;}
.res .tl::before{content:"";position:absolute;left:-35px;top:4px;width:15px;height:15px;border-radius:50%;background:#fff;border:4px solid var(--purple);}
.res .tl.red::before{border-color:var(--red);}
.res .tl.future::before{background:var(--navy);border-color:var(--navy);}
.res .tl .d{font-size:12.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--purple);}
.res .tl.red .d{color:var(--red);}
.res .tl h3{font-size:17.5px;color:var(--navy);margin:3px 0 4px;}
.res .tl p{font-size:14.5px;color:#4a4a60;}
.res .tl .cdbig{display:inline-block;margin-top:8px;background:var(--navy);color:#fff;font-weight:700;font-size:15px;padding:8px 16px;border-radius:8px;}
.res .tl .cdbig span{color:var(--purple);filter:brightness(1.5);}

/* cards */
.res .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:30px;}
.res .card{background:var(--warm);border:1px solid var(--line);border-top:4px solid var(--purple);border-radius:10px;padding:22px;}
.res .card h3{font-size:16px;color:var(--navy);margin-bottom:8px;}
.res .card p{font-size:14px;color:#4a4a60;}
.res .card .big{font-size:30px;font-weight:700;color:var(--navy);line-height:1.1;margin-bottom:6px;}
.res .card .big em{font-style:normal;color:var(--red);}
.res .card.flag{border-top-color:var(--red);}

/* price-shock gauge */
.res .shock{margin-top:34px;background:var(--warm);border:1px solid var(--line);border-radius:12px;padding:26px;}
.res .shock h3{font-size:16px;color:var(--navy);margin-bottom:16px;}
.res .shockbar{position:relative;height:34px;border-radius:8px;background:linear-gradient(90deg,#EFEFF6 0%,#EFEFF6 32%,#E8C9C5 45%,var(--red) 100%);}
.res .shockbar .seg{position:absolute;top:0;bottom:0;left:53.3%;right:0;border:2px dashed rgba(255,255,255,.85);border-radius:6px;}
.res .shock .ticks{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim);margin-top:6px;}
.res .shock .markers{position:relative;height:54px;margin-top:4px;}
.res .shock .mk{position:absolute;transform:translateX(-50%);text-align:center;font-size:12px;font-weight:700;color:var(--navy);}
.res .shock .mk::before{content:"";display:block;width:2px;height:14px;background:var(--navy);margin:0 auto 3px;}
.res .shock .mk small{display:block;font-weight:500;color:var(--dim);}

/* logo chips */
.res .logorow{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;align-items:stretch;}
.res .lchip{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 18px;}
.res .lchip img{height:26px;width:auto;max-width:130px;object-fit:contain;}

/* pillars + charts */
.res .pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:30px;}
.res .charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;margin-top:34px;}
.res .chart{background:var(--warm);border:1px solid var(--line);border-radius:12px;padding:24px;}
.res .chart h3{font-size:15.5px;color:var(--navy);margin-bottom:4px;}
.res .chart .src{font-size:11.5px;color:var(--dim);margin-bottom:18px;}
/* horizontal bar rows (e.g. selection scorecard) */
.res .bars .brow{display:grid;grid-template-columns:140px 1fr 84px;align-items:center;gap:12px;margin-bottom:12px;}
.res .bars .blabel{font-size:13px;font-weight:700;color:var(--navy);}
.res .bars .btrack{background:#E9E9F2;border-radius:6px;height:24px;overflow:hidden;}
.res .bars .bfill{height:100%;border-radius:6px;background:var(--purple);}
.res .bars .bfill.lt{background:#B9BADF;}
.res .bars .bval{font-size:12.5px;font-weight:700;color:var(--navy);text-align:right;}
@media(max-width:560px){.res .bars .brow{grid-template-columns:104px 1fr 62px;gap:8px;}}
.res .opt{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin-bottom:12px;}
.res .opt.r1{border-left:4px solid var(--red);}
.res .opt.r2{border-left:4px solid var(--amber);}
.res .opt.r3{border-left:4px solid var(--green);}
.res .opt b{color:var(--navy);font-size:14px;}
.res .opt p{font-size:13px;color:#4a4a60;margin-top:3px;}
.res .opp .seg{height:40px;border-radius:8px;background:#E9E9F2;position:relative;overflow:hidden;}
.res .opp .target{position:absolute;left:0;top:0;bottom:0;width:55%;background:var(--purple);}
.res .opp .current{position:absolute;left:0;top:0;bottom:0;width:10%;background:var(--navy);}
.res .opp .legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:#4a4a60;}
.res .opp .legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px;}

/* platform cards */
.res .plats{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:32px;}
.res .plat{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;}
.res .plat .phead{background:var(--bar);padding:14px 20px;display:flex;align-items:center;gap:12px;min-height:58px;flex-wrap:wrap;}
.res .plat .phead img{height:24px;max-width:140px;object-fit:contain;background:#fff;border-radius:6px;padding:4px 8px;}
.res .plat .phead .pname{color:#fff;font-weight:700;font-size:14.5px;}
.res .plat .pbody{padding:18px 20px 20px;flex:1;}
.res .plat .fit{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--purple);margin-bottom:10px;}
.res .plat ul{list-style:none;padding:0;margin:0;}
.res .plat li{font-size:13.5px;color:#3c3c50;padding:5px 0 5px 24px;position:relative;}
.res .plat li.pro::before{content:"+";position:absolute;left:2px;top:3px;font-weight:700;color:var(--green);}
.res .plat li.con::before{content:"\2013";position:absolute;left:2px;top:3px;font-weight:700;color:var(--red);}

/* comparison matrix */
.res .tablewrap{overflow-x:auto;margin-top:32px;border:1px solid var(--line);border-radius:12px;}
.res table.matrix{border-collapse:collapse;width:100%;min-width:880px;font-size:13.5px;}
.res .matrix th{background:var(--bar);color:#fff;text-align:left;padding:12px 14px;font-size:13px;}
.res .matrix th:first-child{min-width:150px;}
.res .matrix td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top;color:#3c3c50;}
.res .matrix tr:nth-child(even) td{background:var(--alt);}
.res .matrix td:first-child{font-weight:700;color:var(--navy);}
.res .matrix .good{color:var(--green);font-weight:700;}
.res .matrix .mid{color:var(--amber);font-weight:700;}
.res .matrix .bad{color:var(--red);font-weight:700;}
.res .matrix td.hl{background:#EFEFFB !important;}
.res .matrix td.hl:first-child{border-left:3px solid var(--purple);}

/* pricing */
.res .scenario{background:var(--bar);border-radius:14px;color:#fff;padding:30px;margin-top:32px;}
.res .scenario h3{font-size:18px;margin-bottom:4px;}
.res .scenario .ass{color:#A9A9C0;font-size:13.5px;margin-bottom:24px;}
.res .prows .prow{display:grid;grid-template-columns:210px 1fr 170px;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--dline);}
.res .prows .prow:first-child{border-top:none;}
.res .prows .pn{font-weight:700;font-size:14.5px;}
.res .prows .pn small{display:block;font-weight:400;color:#A9A9C0;font-size:12px;}
.res .prows .ptrack{background:#1F2030;height:24px;border-radius:6px;overflow:hidden;position:relative;}
.res .prows .pfill{position:absolute;top:0;bottom:0;left:0;border-radius:6px;background:var(--purple);}
.res .prows .pfill.red{background:var(--red);}
.res .prows .pfill.green{background:var(--green);}
.res .prows .pfill.range{background:repeating-linear-gradient(45deg,var(--purple),var(--purple) 6px,#8587D6 6px,#8587D6 12px);}
.res .prows .pv{text-align:right;font-weight:700;font-size:15px;}
.res .prows .pv small{display:block;font-weight:400;color:#A9A9C0;font-size:11.5px;}

/* calculator */
.res .calc{border:2px solid var(--purple);border-radius:14px;padding:28px;margin-top:30px;background:var(--warm);}
.res .calc h3{color:var(--navy);font-size:18px;}
.res .calc .cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin:20px 0 8px;}
.res .calc label{font-size:13px;font-weight:700;color:var(--navy);display:block;margin-bottom:8px;}
/* range sliders — track shows a purple fill up to the thumb (gradient set via JS) */
.res .calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:6px;background:#E9E9F2;outline:none;cursor:pointer;margin:8px 0;}
.res .calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-6px;border-radius:50%;background:var(--purple);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer;}
.res .calc input[type=range]::-moz-range-track{height:8px;border-radius:6px;background:transparent;}
.res .calc input[type=range]::-moz-range-thumb{width:18px;height:18px;border:2px solid #fff;border-radius:50%;background:var(--purple);cursor:pointer;}
.res .calc select{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;font-family:var(--rfont);font-size:14px;color:var(--ink);background:#fff;}
.res .calc .cores{font-size:14px;color:var(--navy);margin:8px 0 18px;font-weight:700;}
.res .cres{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.res .cres .cr{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;}
.res .cres .cr.hero-cr{border:2px solid var(--purple);}
.res .cres .crn{font-size:12.5px;font-weight:700;color:var(--dim);}
.res .cres .crv{font-size:22px;font-weight:700;color:var(--navy);margin-top:4px;}
.res .cres .crs{font-size:11.5px;color:var(--dim);margin-top:3px;}

/* journey */
.res .journey{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;margin-top:34px;counter-reset:step;}
.res .jstep{position:relative;padding:20px 18px;background:var(--warm);border:1px solid var(--line);border-left:none;}
.res .jstep:first-child{border-left:1px solid var(--line);border-radius:10px 0 0 10px;}
.res .jstep:last-child{border-radius:0 10px 10px 0;}
.res .jstep::before{counter-increment:step;content:"0" counter(step);font-size:12px;font-weight:700;color:var(--purple);}
.res .jstep h3{font-size:14.5px;color:var(--navy);margin:4px 0 6px;}
.res .jstep p{font-size:12.5px;color:#4a4a60;}

/* article CTA */
.res .cta{background:var(--navy);color:#fff;border-radius:14px;padding:38px;margin:50px 0 0;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;}
.res .cta h2{color:#fff;margin:0 0 6px;}
.res .cta p{color:#C9C9DC;max-width:560px;}
.res .cta a.btn-cta{background:var(--purple);color:#fff;text-decoration:none;font-weight:700;padding:14px 28px;border-radius:10px;font-size:15px;white-space:nowrap;}

/* sources / disclaimers block */
.res .sources{margin-top:48px;border-top:1px solid var(--line);padding-top:26px;}
.res .sources h4{color:var(--navy);font-size:14px;margin-bottom:10px;}
.res .sources ul{margin:0 0 18px 18px;}
.res .sources li{font-size:12.5px;color:#4a4a60;padding:2px 0;}
.res .sources .legal{font-size:11.5px;color:var(--dim);line-height:1.6;}

/* prev / next pager between articles */
.res .res-pagernav{display:flex;justify-content:space-between;gap:16px;align-items:stretch;margin-top:40px;border-top:1px solid var(--line);padding-top:26px;}
.res .res-pager{display:flex;flex-direction:column;gap:5px;max-width:49%;text-decoration:none;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:var(--warm);transition:border-color .15s ease,transform .15s ease;}
.res .res-pager:hover{border-color:var(--purple);transform:translateY(-2px);}
.res .res-pager.next{text-align:right;align-items:flex-end;}
.res .rp-dir{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--purple-d);}
.res .rp-title{font-size:15px;font-weight:600;color:var(--navy);line-height:1.3;}
@media(max-width:560px){.res .res-pager{max-width:100%;}}

/* "on this page" slim section nav (light, sticky under the dark site header) */
.res .pagenav{position:sticky;top:64px;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.res .pagenav .wrap{display:flex;gap:20px;height:46px;align-items:center;overflow-x:auto;white-space:nowrap;}
.res .pagenav a{color:var(--dim);text-decoration:none;font-size:13px;font-weight:600;flex:0 0 auto;}
.res .pagenav a:hover{color:var(--navy);}
.res .pagenav .back{color:var(--purple-d);font-weight:700;}

/* ===== Resources HUB ===== */
.res .reshub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:34px;}
.res .rescard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.res a.rescard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(54,55,87,.12);border-color:var(--purple);}
.res .rescard .thumb{aspect-ratio:1200/630;min-height:170px;background:var(--bar) center/cover no-repeat;border-bottom:1px solid var(--line);}
/* graphic thumbnail: real vendor logos on white chips over a navy gradient */
.res .rescard .thumb.tg{background:linear-gradient(135deg,#2C2D3E 0%,#1F2028 100%);display:flex;align-items:center;justify-content:center;}
.res .tg-logos{display:flex;align-items:center;justify-content:center;gap:18px;max-width:86%;}
/* monochrome-white logos directly on the dark gradient (no chips) */
.res .tg-logo{height:24px;width:auto;max-width:120px;object-fit:contain;filter:brightness(0) invert(1);opacity:.9;}
.res .tg-arrow{color:#9A9CE0;font-size:24px;font-weight:700;line-height:1;flex:0 0 auto;}
.res .tg-bigicon{width:58px;height:58px;color:#fff;opacity:.9;}
.res .rescard .rc-body{padding:20px;flex:1;display:flex;flex-direction:column;}
.res .rescard .rc-badge{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--purple);background:#EFEFFB;border-radius:99px;padding:4px 10px;margin-bottom:10px;}
.res .rescard h3{font-size:18px;color:var(--navy);margin:0 0 8px;line-height:1.25;}
.res .rescard p{font-size:14px;color:#4a4a60;margin:0;flex:1;}
.res .rescard .rc-foot{margin-top:16px;font-size:13.5px;font-weight:700;color:var(--purple-d);}
/* coming-soon variant */
.res .rescard.soon{cursor:default;opacity:.92;}
.res .rescard.soon .thumb{background:repeating-linear-gradient(135deg,#ECECF3,#ECECF3 14px,#F4F4F9 14px,#F4F4F9 28px);display:flex;align-items:center;justify-content:center;}
.res .rescard.soon .thumb span{color:#9A9AB2;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-size:13px;}
.res .rescard.soon .rc-badge{color:var(--dim);background:var(--alt);}
.res .rescard.soon .rc-foot{color:var(--dim);}

@media (max-width:720px){
  .res .prows .prow{grid-template-columns:1fr;gap:6px;}
  .res .prows .pv{text-align:left;}
  .res .cta{flex-direction:column;align-items:flex-start;}
}
@media print{
  .res .pagenav,.res .calc,.res .cta{display:none;}
}

/* White-space hub card: live 3D model with poster fallback */
.res .rescard .thumb.ws-card3d{position:relative;overflow:hidden;background-size:cover;background-position:center}
.res .rescard .thumb.ws-card3d iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;background:transparent}

/* DCIM hub card: animated switch faceplate */
.res .rescard .thumb.dcim-card{position:relative;overflow:hidden}
.res .rescard .thumb.dcim-card .dcim-sw{width:76%}
.res .rescard .thumb.dcim-card .dcim-sw-lab{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#aeb2d0;text-align:center;margin-bottom:11px}
.res .rescard .thumb.dcim-card .dcim-sw-ports{display:grid;grid-template-columns:repeat(24,1fr);gap:3px}
.res .rescard .thumb.dcim-card .dcim-sw-ports i{aspect-ratio:1;border-radius:2px;background:#2a3350;display:block}
.res .rescard .thumb.dcim-card .dcim-sw-ports i.u{background:#3f8f63}
.res .rescard .thumb.dcim-card .dcim-sw-ports i.x{background:#d98b3f;animation:dcimCardX 2s ease-in-out infinite}
@keyframes dcimCardX{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes dcimCardBlink{0%,100%{opacity:1}50%{opacity:.32}}

/* AI-ready hub card: animated neural chip (brain in a processor) */
.res .rescard .thumb.air-card{position:relative;overflow:hidden}
.res .rescard .thumb.air-card .air-ai{width:60%;height:auto;animation:airIn 1.3s cubic-bezier(.3,1.25,.5,1) both}
@keyframes airIn{0%{opacity:0;transform:scale(.55)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
.air-ai .air-trace{fill:none;stroke:#8f91e0;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:3.5 5;animation:airFlow 1s linear infinite}
.air-ai .air-trace:nth-of-type(2){animation-delay:.1s}.air-ai .air-trace:nth-of-type(3){animation-delay:.2s}
.air-ai .air-trace:nth-of-type(4){animation-delay:.3s}.air-ai .air-trace:nth-of-type(5){animation-delay:.15s}
.air-ai .air-trace:nth-of-type(6){animation-delay:.25s}.air-ai .air-trace:nth-of-type(7){animation-delay:.35s}.air-ai .air-trace:nth-of-type(8){animation-delay:.45s}
@keyframes airFlow{to{stroke-dashoffset:-17}}
.air-ai .air-pad{fill:#9a9be6;animation:airPad 2s ease-in-out infinite}
@keyframes airPad{0%,100%{opacity:.5}50%{opacity:1}}
.air-ai .air-chip{fill:rgba(143,145,224,.1);stroke:#9a9be6;stroke-width:2}
.air-ai .air-brain{fill:none;stroke:#5be0a0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:airBrain 2.2s ease-in-out infinite}
@keyframes airBrain{0%,100%{opacity:.6}50%{opacity:1;filter:drop-shadow(0 0 4px rgba(91,224,160,.7))}}

/* ===== Animated hub-card graphics (shared) ===== */
.res .rescard .thumb.anim-card{position:relative;overflow:hidden}
.res .rescard .thumb.anim-card svg.card-ic{width:60%;height:auto;animation:cardIn 1.15s cubic-bezier(.3,1.25,.5,1) both}
@keyframes cardIn{0%{opacity:0;transform:scale(.62)}to{opacity:1;transform:scale(1)}}

/* Data sovereignty — shield + expanding perimeter rings */
.sv-ic .sv-shield{fill:rgba(154,155,230,.1);stroke:#9a9be6;stroke-width:2;stroke-linejoin:round}
.sv-ic .sv-mark{fill:none;stroke:#5be0a0;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;animation:svMark 2.4s ease-in-out infinite}
@keyframes svMark{0%,100%{opacity:.65}50%{opacity:1;filter:drop-shadow(0 0 3px rgba(91,224,160,.6))}}
.sv-ic .sv-ring{fill:none;stroke:#9a9be6;stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center;animation:svRing 2.8s ease-out infinite}
.sv-ic .sv-ring:nth-of-type(2){animation-delay:1.4s}
@keyframes svRing{0%{opacity:.5;transform:scale(.45)}80%{opacity:0;transform:scale(1.5)}100%{opacity:0}}

/* Liquid cooling — circulating coolant loop + droplet */
.lc-ic .lc-loop{fill:none;stroke:#5bb8e0;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:5 6;animation:lcFlow 1.1s linear infinite}
@keyframes lcFlow{to{stroke-dashoffset:-22}}
.lc-ic .lc-drop{fill:#5bb8e0;transform-box:fill-box;transform-origin:center;animation:lcDrop 2.2s ease-in-out infinite}
@keyframes lcDrop{0%,100%{opacity:.7;transform:translateY(1px) scale(.96)}50%{opacity:1;transform:translateY(-1px) scale(1)}}

/* ITAD — drive fed into shredder, strips fall */
.it-ic .it-drive{fill:rgba(224,160,91,.14);stroke:#e0a05b;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:itFeed 2.8s ease-in infinite}
@keyframes itFeed{0%{transform:translateY(-7px);opacity:1}55%{transform:translateY(3px);opacity:1}72%,100%{transform:translateY(3px);opacity:0}}
.it-ic .it-platter{fill:#e0a05b;opacity:.8}
.it-ic .it-teeth{fill:none;stroke:#8a8fa8;stroke-width:2;stroke-linejoin:round}
.it-ic .it-strip{fill:#e0a05b;animation:itFall 2.8s ease-in infinite}
.it-ic .it-strip:nth-of-type(2){animation-delay:.1s}.it-ic .it-strip:nth-of-type(3){animation-delay:.2s}.it-ic .it-strip:nth-of-type(4){animation-delay:.05s}.it-ic .it-strip:nth-of-type(5){animation-delay:.15s}
@keyframes itFall{0%,55%{opacity:0;transform:translateY(0)}66%{opacity:.9;transform:translateY(0)}100%{opacity:0;transform:translateY(15px)}}

/* DC ops — uptime ECG sweep + status dots */
.op-ic .op-screen{fill:rgba(154,155,230,.08);stroke:#9a9be6;stroke-width:2}
.op-ic .op-ecg{fill:none;stroke:#5be0a0;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:170;stroke-dashoffset:170;animation:opEcg 2.6s linear infinite}
@keyframes opEcg{0%{stroke-dashoffset:170}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-170}}
.op-ic .op-dot{fill:#5be0a0;animation:opDot 1.8s ease-in-out infinite}
.op-ic .op-dot:nth-of-type(2){animation-delay:.3s}.op-ic .op-dot:nth-of-type(3){animation-delay:.6s}
@keyframes opDot{0%,100%{opacity:.35}50%{opacity:1}}

/* AI/GPU data hall — leaf-spine fabric with pulses */
.gp-ic .gp-link{stroke:#9a9be6;stroke-width:1.6;fill:none;stroke-dasharray:3 5;animation:gpFlow 1s linear infinite}
.gp-ic .gp-link:nth-of-type(2){animation-delay:.15s}.gp-ic .gp-link:nth-of-type(3){animation-delay:.3s}.gp-ic .gp-link:nth-of-type(4){animation-delay:.1s}.gp-ic .gp-link:nth-of-type(5){animation-delay:.25s}.gp-ic .gp-link:nth-of-type(6){animation-delay:.4s}
@keyframes gpFlow{to{stroke-dashoffset:-16}}
.gp-ic .gp-spine{fill:#9a9be6}
.gp-ic .gp-rack{fill:rgba(154,155,230,.16);stroke:#9a9be6;stroke-width:1.8;animation:gpRack 2.2s ease-in-out infinite}
.gp-ic .gp-rack:nth-of-type(2){animation-delay:.4s}.gp-ic .gp-rack:nth-of-type(3){animation-delay:.8s}.gp-ic .gp-rack:nth-of-type(4){animation-delay:1.2s}
@keyframes gpRack{0%,100%{opacity:.7}50%{opacity:1}}

/* Fit-out — hall fills with racks, then goes live */
.ft-ic .ft-hall{fill:none;stroke:#9a9be6;stroke-width:2;stroke-linejoin:round}
.ft-ic .ft-bar{fill:#9a9be6;transform-box:fill-box;transform-origin:bottom;animation:ftRise 3.4s ease-in-out infinite}
.ft-ic .ft-bar:nth-of-type(2){animation-delay:.2s}.ft-ic .ft-bar:nth-of-type(3){animation-delay:.4s}.ft-ic .ft-bar:nth-of-type(4){animation-delay:.6s}.ft-ic .ft-bar:nth-of-type(5){animation-delay:.8s}
@keyframes ftRise{0%{transform:scaleY(0)}35%{transform:scaleY(1)}88%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.ft-ic .ft-live{fill:#5be0a0;opacity:0;animation:ftLive 3.4s ease-in-out infinite}
@keyframes ftLive{0%,42%{opacity:0}52%{opacity:1}86%{opacity:1}100%{opacity:0}}

/* Sustainable — leaf + rotating renewable loop */
.su-ic .su-ring{fill:none;stroke:#5be0a0;stroke-width:2;stroke-dasharray:7 7;transform-box:fill-box;transform-origin:center;animation:suSpin 7s linear infinite}
@keyframes suSpin{to{transform:rotate(360deg)}}
.su-ic .su-leaf{fill:rgba(91,224,160,.16);stroke:#5be0a0;stroke-width:2;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;animation:suLeaf 2.6s ease-in-out infinite}
@keyframes suLeaf{0%,100%{opacity:.8}50%{opacity:1;filter:drop-shadow(0 0 4px rgba(91,224,160,.6))}}
.su-ic .su-vein{fill:none;stroke:#5be0a0;stroke-width:1.6;stroke-linecap:round;opacity:.8}

/* AI-ready card v2: side-profile purple brain with a green current tracing the outline */
.air-ai .ai-brain{fill:rgba(143,145,224,.16);stroke:#9a9be6;stroke-width:2.4;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;animation:aiGlow 2.8s ease-in-out infinite}
@keyframes aiGlow{0%,100%{opacity:.85}50%{opacity:1;filter:drop-shadow(0 0 6px rgba(143,145,224,.65))}}
.air-ai .ai-gyrus{fill:none;stroke:#bfc1f2;stroke-width:1.5;stroke-linecap:round;opacity:.6}
.air-ai .ai-spark{fill:#5be0a0;filter:drop-shadow(0 0 5px rgba(91,224,160,.95))}
.air-ai .ai-spark.t1{opacity:.45}
.air-ai .ai-spark.t2{opacity:.2}

/* VMware -> Nutanix card: animated data-migration packets (logos stay put) */
.res .rescard .thumb .tg-mig{position:relative;width:50px;height:16px;flex:0 0 auto}
.res .rescard .thumb .tg-mig::before{content:"";position:absolute;left:0;right:8px;top:50%;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,rgba(154,156,224,.18),rgba(154,156,224,.55))}
.res .rescard .thumb .tg-mig::after{content:"\203A";position:absolute;right:-4px;top:50%;transform:translateY(-50%);color:#9A9CE0;font-size:18px;font-weight:700;line-height:1}
.res .rescard .thumb .tg-mig i{position:absolute;top:50%;left:0;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#9A9CE0;box-shadow:0 0 6px rgba(154,156,224,.95);animation:tgMig 1.5s linear infinite}
.res .rescard .thumb .tg-mig i:nth-child(2){animation-delay:.5s}
.res .rescard .thumb .tg-mig i:nth-child(3){animation-delay:1s}
@keyframes tgMig{0%{left:0;opacity:0}14%{opacity:1}82%{opacity:1}100%{left:42px;opacity:0}}

/* AI-ready card v3: brain-circuit (organic brain + circuit nodes), green current along traces */
.air-ai .aic-brain{fill:rgba(143,145,224,.14);stroke:#9a9be6;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;animation:aiGlow 2.8s ease-in-out infinite}
.air-ai .aic-gyrus{fill:none;stroke:#9a9be6;stroke-width:2.4;stroke-linecap:round}
.air-ai .aic-chip{fill:none;stroke:#9a9be6;stroke-width:3;stroke-linejoin:round}
.air-ai .aic-trace{fill:none;stroke:#9a9be6;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.air-ai .aic-node{fill:#141829;stroke:#9a9be6;stroke-width:2.4;animation:aiNode 2.2s ease-in-out infinite}
@keyframes aiNode{0%,100%{stroke:#9a9be6}50%{stroke:#5be0a0}}
.air-ai .aic-spark{fill:#5be0a0;filter:drop-shadow(0 0 4px rgba(91,224,160,.95))}

/* Migrations hub card: a live estate moving rack-to-rack */
.res .rescard .thumb.mg-card{position:relative;overflow:hidden}
.res .rescard .thumb.mg-card .mg-ic{width:66%;height:auto;animation:cardIn 1.15s cubic-bezier(.3,1.25,.5,1) both}
.mg-card .mg-rack{stroke:#6064a0;stroke-width:2.4}
.mg-card .mg-rack.dst{stroke:#5fbf86}
.mg-card .mg-path{stroke:#5a5f8f;stroke-width:2;stroke-dasharray:2 5;stroke-linecap:round}
.mg-card .mg-stat{fill:#3f8f63;opacity:.85}
.mg-card .mg-dev{fill:#9a9cf0;transform-box:fill-box}
.mg-card .mg-dev.mg-d1{animation:mgMove 3.2s ease-in-out infinite}
.mg-card .mg-dev.mg-d2{animation:mgMove 3.2s ease-in-out infinite .7s;fill:#7fd0a0}
.mg-card .mg-dev.mg-d3{animation:mgMove 3.2s ease-in-out infinite 1.4s;fill:#8fb6ec}
@keyframes mgMove{0%{transform:translateX(0);opacity:0}8%{opacity:1}46%{transform:translateX(56px);opacity:1}58%{transform:translateX(56px);opacity:0}100%{transform:translateX(56px);opacity:0}}

/* Reduced-motion: neutralise the 25 keyframe animations on resource pages */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}