/* ========================================================= Infrability AI Solutions — "Aurora" design system Powered by AIVortex · dual-theme (light default + dark toggle) Theme is driven entirely by tokens; [data-theme="dark"] on swaps the token values + a few decorative overrides at the end. Shared by index.html and /products/*.html ========================================================= */ :root{ /* ---------- LIGHT (default) ---------- */ --bg:#f4f6fa; --bg-1:#eef1f7; --panel:#ffffff; --panel-2:#f8fafc; --glass:rgba(255,255,255,.7); --glass-2:rgba(255,255,255,.96); --line:#e6eaf2; --line-2:#eef1f6; --ink:#10182a; --ink-soft:#36405a; --muted:#5b6478; --muted-2:#8893a8; --head:#10182a; --azure:#1668c8; --cyan:#0f766e; --violet:#4b54d6; --azure-rgb:22,104,200; --cyan-rgb:15,154,138; --violet-rgb:75,84,214; --grad:linear-gradient(100deg,#1668c8,#0f9a8a); --grad-3:linear-gradient(110deg,#4b54d6,#1668c8 45%,#0f9a8a); --btn-ink:#ffffff; --shadow:0 1px 2px rgba(16,24,42,.04), 0 14px 30px -18px rgba(16,24,42,.22); --shadow-lg:0 2px 6px rgba(16,24,42,.06), 0 34px 64px -28px rgba(16,24,42,.30); --elev:0 20px 46px -26px rgba(var(--azure-rgb),.4); --surface:#f7f9fc; --surface-2:#eef3f9; --cell-bg:#ffffff; --console-bg:linear-gradient(180deg,#ffffff,#f7f9fc); --warn:#a15c00; --warn-rgb:255,176,32; --hair:rgba(16,24,42,.12); --header-bg:rgba(255,255,255,.72); --nav-pop:rgba(255,255,255,.98); --maxw:1600px; --r:16px; --r-lg:22px; } :root[data-theme="dark"]{ /* ---------- DARK ---------- */ --bg:#05070d; --bg-1:#080b14; --panel:#0c111e; --panel-2:#0e1422; --glass:rgba(255,255,255,.035); --glass-2:rgba(255,255,255,.06); --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.05); --ink:#eaf0fb; --ink-soft:#cdd7ec; --muted:#94a2c0; --muted-2:#7c8aac; --head:#ffffff; --azure:#2e9bff; --cyan:#19e0d0; --violet:#6f7bff; --azure-rgb:46,155,255; --cyan-rgb:25,224,208; --violet-rgb:111,123,255; --grad:linear-gradient(100deg,#2e9bff,#19e0d0); --grad-3:linear-gradient(110deg,#6f7bff,#2e9bff 45%,#19e0d0); --btn-ink:#04121f; --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.8); --shadow-lg:0 1px 0 rgba(255,255,255,.06) inset, 0 40px 80px -32px rgba(0,0,0,.9); --elev:0 0 50px -24px rgba(var(--azure-rgb),.7); --surface:rgba(255,255,255,.02); --surface-2:rgba(255,255,255,.06); --cell-bg:rgba(12,17,30,.7); --console-bg:linear-gradient(180deg,rgba(16,22,38,.92),rgba(8,11,20,.92)); --warn:#ffcf6b; --warn-rgb:255,207,107; --hair:rgba(255,255,255,.16); --header-bg:rgba(5,7,13,.66); --nav-pop:rgba(5,7,13,.97); } html { scroll-behavior: smooth; scroll-padding-top: 92px; font-size: 16px; overflow-x:hidden; } ::selection{background:rgba(var(--azure-rgb),.22)} a{color:inherit;text-decoration:none} /*img{max-width:100%;display:block}*/ svg{display:block} /* ---------- accessibility: keyboard focus + skip link ---------- */ :focus-visible{outline:2px solid var(--azure);outline-offset:3px;border-radius:6px} .btnx:focus-visible{outline-offset:4px} .skip-link{position:absolute;left:14px;top:-48px;z-index:100; background:var(--grad);color:var(--btn-ink);font-family:'Space Grotesk';font-weight:600; font-size:.85rem;padding:9px 16px;border-radius:0 0 12px 12px; transition:top .2s ease} .skip-link:focus{top:0} /* ambient page atmosphere — soft tinted wash */ body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(42% 28% at 82% -2%, rgba(var(--azure-rgb),.08), transparent 70%), radial-gradient(38% 26% at 6% 6%, rgba(var(--violet-rgb),.06), transparent 72%), radial-gradient(60% 40% at 50% 108%, rgba(var(--cyan-rgb),.07), transparent 70%); } body::after{ /* fine grain */ content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.02; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .wrap{position:relative;z-index:2} /*.container{max-width:var(--maxw);margin:0 auto;padding-left:26px;padding-right:26px}*/ .btnx{font-family:'Space Grotesk';font-weight:600;font-size:.9rem; display:inline-flex;align-items:center;gap:8px; padding:11px 21px;border-radius:999px;border:1px solid transparent; background:var(--grad);color:var(--btn-ink);cursor:pointer;white-space:nowrap; transition:transform .2s,box-shadow .2s;box-shadow:0 10px 26px -12px rgba(var(--azure-rgb),.55)} .btnx:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(var(--cyan-rgb),.55)} .navlinks a.btn{color:var(--btn-ink)}/* beat `.navlinks a` so gradient button keeps legible text */ .btnx.ghost{background:var(--glass);color:var(--ink);border-color:var(--line); box-shadow:none;backdrop-filter:blur(6px)} .btnx.ghost:hover{border-color:rgba(var(--azure-rgb),.55);background:var(--glass-2)} /* ---------- theme toggle (injected by main.js) ---------- */ .theme-toggle{display:inline-grid;place-items:center;width:40px;height:38px;flex:none; background:var(--glass);border:1px solid var(--line);border-radius:10px;cursor:pointer; color:var(--ink-soft);transition:color .2s,border-color .2s,background .2s,transform .2s} .theme-toggle:hover{color:var(--azure);border-color:rgba(var(--azure-rgb),.5);transform:translateY(-1px)} .theme-toggle svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none} .theme-toggle .sun{display:none}/* light theme → show moon (switch to dark) */ :root[data-theme="dark"] .theme-toggle .sun{display:block}/* dark theme → show sun (switch to light) */ :root[data-theme="dark"] .theme-toggle .moon{display:none} /* ---------- shared type ---------- */ .eyebrow{font-family:'JetBrains Mono';font-weight:500;font-size:.74rem;letter-spacing:.18em; text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:9px} .eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--azure),var(--cyan))} h2{font-family:'Space Grotesk';font-weight:500;letter-spacing:-.03em; font-size:clamp(1.95rem,4vw,3.05rem);line-height:1.08;margin:16px 0;color:var(--head)} .lede{color:var(--muted);font-size:1.05rem;max-width:60ch} .gradtext{background:var(--grad-3);-webkit-background-clip:text;background-clip:text;color:transparent} section{padding-top:clamp(28px,3vw,44px);padding-bottom:clamp(60px,7vw,104px);position:relative} .section-head{max-width:780px;margin-bottom:48px} .section-head .lede{margin-top:14px} .offer-divider{padding-top:clamp(30px,5vw,56px);padding-bottom:6px;display:flex;flex-direction:column;gap:10px} .offer-kicker{display:inline-flex;align-items:center;gap:10px;width:fit-content; font-family:'Space Grotesk';font-weight:600;font-size:clamp(1.15rem,2vw,1.5rem);color:var(--head); padding:8px 16px 8px 8px;border:1px solid var(--line);border-radius:999px;background:var(--panel)} .offer-kicker img{height:30px;width:30px;background:#eef2f7;border-radius:50%;padding:4px;object-fit:contain} [data-theme="dark"] .offer-kicker img{background:#eef2f7} .section-head .offer-kicker{margin-bottom:18px} .offer-divider p{color:var(--muted);font-size:.96rem;max-width:60ch;margin:0} .splithead{display:grid;grid-template-columns:1fr auto;align-items:end;gap:34px;margin-bottom:46px} .splithead .lede{max-width:44ch} /* ---------- hero ---------- */ .hero{position:relative;padding-top:clamp(60px,8vw,104px);padding-bottom:clamp(40px,5vw,70px); text-align:center;overflow:hidden} .hero-aurora{position:absolute;left:50%;top:46%;transform:translateX(-50%); width:170%;height:120%;z-index:0;pointer-events:none; background: radial-gradient(38% 42% at 50% 72%, rgba(var(--azure-rgb),.18), transparent 62%), radial-gradient(30% 32% at 42% 84%, rgba(var(--cyan-rgb),.14), transparent 60%), radial-gradient(34% 34% at 60% 86%, rgba(var(--violet-rgb),.12), transparent 60%), radial-gradient(60% 50% at 50% 120%, rgba(var(--azure-rgb),.08), transparent 60%); filter:blur(20px);opacity:.95; animation:aurora 14s ease-in-out infinite alternate} @keyframes aurora{0%{transform:translateX(-52%) scale(1)}100%{transform:translateX(-48%) scale(1.08)}} .hero-inner{position:relative;z-index:2;max-width:920px;margin:0 auto} .badge{display:inline-flex;align-items:center;gap:10px;padding:7px 15px;border-radius:999px; border:1px solid var(--line);background:var(--glass);font-size:.78rem;color:var(--muted); font-family:'JetBrains Mono';backdrop-filter:blur(6px)} .badge img{height:22px;width:22px;background:#eef2f7;border-radius:50%;padding:3px} .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan); box-shadow:0 0 10px var(--cyan);animation:pulse 2s infinite} @keyframes pulse{50%{opacity:.35}} .hero h1{font-family:'Space Grotesk';font-weight:500;letter-spacing:-.035em; font-size:clamp(2.2rem,4.4vw,3.5rem);line-height:1.05;margin:22px auto 18px;max-width:20ch;color:var(--head)} .hero p.sub{font-size:clamp(1rem,1.25vw,1.14rem);color:var(--muted);max-width:58ch;margin:0 auto} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;justify-content:center} .hero-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px;justify-content:center} .hero-chips span,.feat span{font-size:.73rem;color:var(--ink-soft);font-family:'JetBrains Mono'; padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--glass)} /* ---------- two-column hero ---------- */ .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px);align-items:center;margin:0 auto} .hero-copy{max-width:none;margin:0;text-align:left} .hero-copy p.sub{margin-left:0;max-width:54ch} .hero-copy .hero-cta{justify-content:flex-start} @media(max-width:880px){ .hero-grid{grid-template-columns:1fr;gap:30px} .orb-stage{order:-1;max-width:320px;margin:0 auto} .hero-copy{text-align:center} .hero-copy p.sub{margin-left:auto;margin-right:auto} .hero-copy .hero-cta{justify-content:center} } /* ---------- orb stage (reuses .ringz/.disc/.mark from .il-visual) ---------- */ .orb-stage{position:relative;aspect-ratio:1;display:grid;place-items:center;width:100%;max-width:540px; margin-inline:auto;animation:orbFloat 8s ease-in-out infinite; background-image:var(--orb-img),radial-gradient(circle closest-side at 50% 50%,rgba(var(--cyan-rgb),.34),rgba(var(--violet-rgb),.18) 44%,transparent 100%); background-size:86%,100% 100%;background-position:center,center;background-repeat:no-repeat,no-repeat} .orb-stage .ringz{position:absolute;border-radius:50%;border:1px solid var(--hair)} .orb-stage .ringz.a{width:78%;height:78%} .orb-stage .ringz.b{width:100%;height:100%;border-style:dashed;border-color:rgba(var(--azure-rgb),.25); animation:orbSpin 40s linear infinite} .orb-stage .disc{position:absolute;width:62%;height:62%;border-radius:50%; background:radial-gradient(circle at 50% 40%,rgba(var(--cyan-rgb),.30),rgba(var(--violet-rgb),.12) 60%,transparent 72%); animation:orbBreath 6s ease-in-out infinite} .orb-stage .mark{position:relative;z-index:2;width:38%} .orb-stage .orb-glow{display:none;position:absolute;width:104%;height:104%;border-radius:50%; background:conic-gradient(from 0deg,rgba(var(--cyan-rgb),.0),rgba(var(--cyan-rgb),.22),rgba(var(--violet-rgb),.18),rgba(var(--azure-rgb),.0)); filter:blur(28px);animation:orbSpin 18s linear infinite} @keyframes orbSpin{to{transform:rotate(360deg)}} @keyframes orbBreath{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.05);opacity:1}} @keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @media(prefers-reduced-motion:reduce){ .orb-stage,.orb-stage .ringz.b,.orb-stage .disc,.orb-stage .orb-glow{animation:none} } /* orb image enable (generated orbs exist) */ :root{--orb-img:url('img/hero-orb-light.webp')} [data-theme="dark"]{--orb-img:url('img/hero-orb-dark.webp')} .orb-stage .ringz,.orb-stage .disc,.orb-stage .mark{opacity:0} /* curiosity hook — interactive teaser chips */ .hook{margin-top:28px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel);max-width:54ch} .hero-copy .hook{text-align:left} .hook-q{display:block;font-family:'Space Grotesk';font-weight:600;font-size:.98rem;color:var(--head);margin-bottom:12px} .hook-chips{display:flex;flex-wrap:wrap;gap:8px} .hook-chip{font-family:'JetBrains Mono';font-size:.74rem;letter-spacing:.04em;color:var(--ink-soft); background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer; transition:transform .18s,border-color .18s,background .18s,color .18s} .hook-chip:hover{transform:translateY(-2px);border-color:rgba(var(--cyan-rgb),.5)} .hook-chip.is-active{color:var(--btn-ink);background:var(--grad);border-color:transparent} .hook-chip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px} .hook-answer{margin-top:14px;font-size:.92rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline} .hook-answer-link{color:var(--cyan);font-family:'Space Grotesk';font-weight:500;white-space:nowrap} .hook-answer-link:hover{color:var(--head)} @media(max-width:880px){.hook{margin-left:auto;margin-right:auto}.hook-chips{justify-content:center}.hero-copy .hook{text-align:center}.hook-answer{justify-content:center}} @media(prefers-reduced-motion:reduce){.hook-chip{transition:none}} /* ---------- AIVortex governance console ---------- */ .console-wrap{position:relative;z-index:2;max-width:1000px;margin:54px auto 0} .console{position:relative;border-radius:18px;border:1px solid var(--line); background:var(--console-bg); box-shadow:var(--shadow-lg),var(--elev); overflow:hidden;text-align:left;backdrop-filter:blur(8px)} .console::before{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none; background:linear-gradient(180deg,rgba(var(--azure-rgb),.06),transparent 30%)} .console-bar{display:flex;align-items:center;gap:14px;padding:13px 18px; border-bottom:1px solid var(--line-2);background:var(--surface)} .console-bar .dots{display:flex;gap:6px} .console-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--hair)} .console-bar .ctitle{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono'; font-size:.74rem;color:var(--ink-soft);letter-spacing:.04em} .console-bar .ctitle img{height:23px;width:23px;background:#eef2f7;border-radius:50%;padding:3px} .console-tabs{margin-left:auto;display:flex;gap:5px} .console-tabs span{font-family:'JetBrains Mono';font-size:.68rem;color:var(--muted-2); padding:5px 11px;border-radius:7px;border:1px solid transparent} .console-tabs span.on{color:var(--ink);background:var(--surface-2);border-color:var(--line)} .console-body{padding:22px;display:grid;gap:14px} .cmsg{border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;background:var(--surface)} .cmsg .role{font-family:'JetBrains Mono';font-size:.64rem;letter-spacing:.14em;text-transform:uppercase; color:var(--muted-2);display:inline-flex;align-items:center;gap:7px;margin-bottom:8px} .cmsg.answer{border-color:rgba(var(--azure-rgb),.28); background:linear-gradient(180deg,rgba(var(--azure-rgb),.06),var(--surface))} .cmsg.answer .role{color:var(--cyan)} .cmsg .role .live{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)} .cmsg p{color:var(--ink-soft);font-size:.94rem;margin:0} .csrc{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px} .csrc span{font-family:'JetBrains Mono';font-size:.66rem;color:var(--azure); border:1px solid rgba(var(--azure-rgb),.3);border-radius:6px;padding:3px 8px;background:rgba(var(--azure-rgb),.07)} .cmeta{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center} .chip-conf{font-family:'JetBrains Mono';font-size:.66rem;color:var(--cyan); border:1px solid rgba(var(--cyan-rgb),.3);border-radius:999px;padding:3px 10px;background:rgba(var(--cyan-rgb),.08)} .chip-hil{font-family:'JetBrains Mono';font-size:.66rem;color:var(--warn); border:1px solid rgba(var(--warn-rgb),.4);border-radius:999px;padding:3px 10px;background:rgba(var(--warn-rgb),.14)} .crow{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center; border-top:1px solid var(--line-2);padding-top:14px} .crow .approve{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--muted)} .crow .approve b{font-weight:500;color:var(--ink-soft)} .crow .approve .ok{font-family:'Space Grotesk';font-weight:600;font-size:.74rem;color:var(--btn-ink); background:var(--grad);border-radius:999px;padding:5px 12px} .crow .audit{font-family:'JetBrains Mono';font-size:.66rem;color:var(--muted-2)} /* ---------- stats strip ---------- */ .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--line);border:1px solid var(--line);border-radius:var(--r); overflow:hidden;box-shadow:var(--shadow)} .strip .cell{background:var(--cell-bg);padding:28px 24px} .strip .num{font-family:'Space Grotesk';font-weight:600;font-size:clamp(1.7rem,3vw,2.5rem); letter-spacing:-.03em;line-height:1;background:var(--grad);-webkit-background-clip:text; background-clip:text;color:transparent} .strip .lbl{color:var(--muted);font-size:.8rem;margin-top:9px;font-family:'JetBrains Mono';line-height:1.45} /* ---------- grids + glass cards ---------- */ .grid{display:grid;gap:18px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center; background:linear-gradient(135deg,rgba(var(--azure-rgb),.14),rgba(var(--cyan-rgb),.11)); border:1px solid var(--line);margin-bottom:18px;color:var(--cyan)} .ic svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.6;fill:none} .ic.brand{background:#fff} .ic.brand svg{stroke:none;width:26px;height:26px} .ic.brand.odoo span{font-family:'Space Grotesk';font-weight:700;font-size:.95rem;color:#714B67;letter-spacing:-.01em} .card{position:relative;background:var(--panel);border:1px solid var(--line); border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow);overflow:hidden; backdrop-filter:blur(6px);transition:transform .25s,box-shadow .25s,border-color .25s,background .25s} .card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(var(--azure-rgb),.5),transparent);opacity:0;transition:opacity .3s} .card:hover{transform:translateY(-5px);border-color:rgba(var(--azure-rgb),.4); box-shadow:var(--shadow-lg),var(--elev)} .card:hover::before{opacity:1} .layer-card .step{font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.14em; text-transform:uppercase;color:var(--cyan);margin-bottom:12px} .card h3{font-family:'Space Grotesk';font-weight:600;font-size:1.16rem; letter-spacing:-.02em;margin-bottom:9px;color:var(--head)} .card p{color:var(--muted);font-size:.93rem} .card-head{display:flex;align-items:center;gap:14px;margin-bottom:16px} .card-head .ic{margin-bottom:0;flex:none} .card-head h3{font-family:'Space Grotesk';font-weight:600;font-size:1.22rem; letter-spacing:-.02em;color:var(--head);margin:0} .product-tag{display:inline-block;font-family:'JetBrains Mono';font-size:.66rem; text-transform:uppercase;letter-spacing:.14em;color:var(--azure);margin-bottom:13px} .feat{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .card-best{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2); font-size:.8rem;color:var(--muted-2);font-family:'JetBrains Mono';line-height:1.5} .card-best b{color:var(--ink-soft);font-weight:500} .card-link{display:inline-flex;align-items:center;gap:7px;margin-top:20px; font-family:'Space Grotesk';font-weight:600;font-size:.86rem;color:var(--cyan)} .card-link svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .2s} .card:hover .card-link svg{transform:translateX(3px)} /* featured product card — gradient border + glow */ .card.featured{background: linear-gradient(var(--panel),var(--panel)) padding-box, linear-gradient(120deg,rgba(var(--azure-rgb),.65),rgba(var(--cyan-rgb),.5)) border-box; border:1px solid transparent;box-shadow:var(--shadow),var(--elev)} .card.featured:hover{box-shadow:var(--shadow-lg),var(--elev)} .card.muted{background:rgba(var(--azure-rgb),.03);display:flex;flex-direction:column;justify-content:center} /* ---------- agents directory (horizontal clickable tiles) ---------- */ .agent-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .agent-card{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start; position:relative;overflow:hidden;padding:22px 24px;border:1px solid var(--line); border-radius:var(--r);background:var(--panel);box-shadow:var(--shadow); transition:border-color .25s,transform .25s,box-shadow .25s} .agent-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--grad);opacity:0;transition:opacity .25s} .agent-card:hover{border-color:rgba(var(--azure-rgb),.4);transform:translateX(4px); box-shadow:var(--shadow-lg),var(--elev)} .agent-card:hover::before{opacity:1} .agent-card .ic{width:42px;height:42px;margin-bottom:0;flex:none} .agent-card .ic svg{width:21px;height:21px} .agent-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px} .agent-card h3{font-family:'Space Grotesk';font-weight:600;font-size:1.08rem;letter-spacing:-.02em;color:var(--head)} .agent-card .arrow{width:16px;height:16px;flex:none;stroke:var(--cyan);stroke-width:2;fill:none;transition:transform .2s} .agent-card:hover .arrow{transform:translateX(4px)} .agent-card p{color:var(--muted);font-size:.88rem} .agent-card .feat{margin-top:12px} @media(max-width:760px){.agent-grid{grid-template-columns:1fr}} /* ---------- architecture layered stack ---------- */ .layer-stack{display:grid;gap:14px} .arch-layer{display:grid;grid-template-columns:210px 1fr;gap:24px;align-items:center; border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:22px 26px; box-shadow:var(--shadow)} .arch-layer .lname{display:flex;align-items:center;gap:13px} .arch-layer .lnum{font-family:'JetBrains Mono';font-size:.74rem;color:var(--cyan)} .arch-layer h4{font-family:'Space Grotesk';font-weight:600;font-size:1.05rem;color:var(--head)} .arch-layer .lnodes{display:flex;flex-wrap:wrap;gap:8px} .arch-layer .lnodes span{font-family:'JetBrains Mono';font-size:.74rem;color:var(--ink-soft); background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:5px 10px} .arch-layer.core{border-color:rgba(var(--azure-rgb),.28); background:linear-gradient(105deg,rgba(var(--azure-rgb),.06),rgba(var(--cyan-rgb),.045)),var(--panel); box-shadow:var(--shadow)} .arch-layer.core .lnodes span{background:rgba(var(--azure-rgb),.07);border-color:rgba(var(--azure-rgb),.18)} .arch-note{margin-top:22px;color:var(--muted);font-size:.95rem;max-width:72ch} /* Microsoft Partner band */ .ms-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 40px; border:1px solid var(--line);background:var(--panel);border-radius:20px; padding:clamp(22px,3vw,34px) clamp(24px,3vw,38px);box-shadow:var(--shadow)} .ms-band-lead{display:flex;align-items:center;gap:18px;flex:1 1 360px;min-width:0} .ms-logo{width:52px;height:52px;border-radius:13px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex:none} .ms-logo svg{width:29px;height:29px} .ms-band-lead .eyebrow{margin-bottom:8px} .ms-band-lead h3{font-family:'Space Grotesk';font-weight:600;font-size:clamp(1.02rem,1.6vw,1.28rem); color:var(--head);line-height:1.32;max-width:36ch} .ms-badges{display:flex;flex-wrap:wrap;gap:9px} .ms-badges span{font-family:'JetBrains Mono';font-size:.74rem;letter-spacing:.04em;color:var(--ink-soft); background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 15px;white-space:nowrap} @media(max-width:680px){.ms-band-lead{flex-basis:100%}} /* Contact form */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start; border:1px solid var(--line);background:var(--panel);border-radius:24px; padding:clamp(28px,4vw,52px);box-shadow:var(--shadow)} .contact-pitch .lede{margin-top:14px} .contact-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px} .contact-points li{display:flex;align-items:center;gap:11px;color:var(--ink-soft);font-size:.92rem} .contact-points li svg{width:18px;height:18px;stroke:var(--cyan);stroke-width:1.8;fill:none;flex:none} .contact-points a{color:var(--cyan)} .contact-points a:hover{color:var(--head)} .contact-form{display:grid;gap:14px} .contact-form .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .contact-form .field{display:grid;gap:6px} .contact-form label{font-family:'Space Grotesk';font-weight:500;font-size:.84rem;color:var(--ink-soft)} .contact-form .cf-opt{color:var(--muted-2);font-weight:400} .contact-form input,.contact-form select,.contact-form textarea{ font-family:'Inter',system-ui,sans-serif;font-size:.92rem;color:var(--ink);background:var(--surface); border:1px solid var(--line);border-radius:11px;padding:11px 13px;width:100%; transition:border-color .2s,box-shadow .2s} [data-theme="dark"] .contact-form input,[data-theme="dark"] .contact-form select,[data-theme="dark"] .contact-form textarea{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.17)} .contact-form textarea{resize:vertical;min-height:96px} .contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{ outline:none;border-color:rgba(var(--cyan-rgb),.6);box-shadow:0 0 0 3px rgba(var(--cyan-rgb),.14)} .contact-form .field.error input,.contact-form .field.error textarea{border-color:var(--warn)} .contact-form .btn{width:100%;justify-content:center;cursor:pointer;margin-top:4px;border:none} .cf-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0} .cf-status{font-size:.88rem;min-height:1.2em;margin:0} .cf-status.ok{color:var(--cyan)} .cf-status.err{color:var(--warn)} @media(max-width:760px){.contact-grid{grid-template-columns:1fr}} @media(max-width:480px){.contact-form .cf-row{grid-template-columns:1fr}} /* Customer story / case study */ .case{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,4vw,52px);align-items:center; border:1px solid var(--line);background:var(--panel);border-radius:24px; padding:clamp(28px,4vw,46px);box-shadow:var(--shadow)} .case-text p{color:var(--muted);font-size:.98rem;margin-bottom:14px;line-height:1.62} .case-text strong{color:var(--head);font-weight:600} .case-text .card-link{margin-top:6px} .case-stats{display:grid;gap:18px} .case-stat{border-left:2px solid rgba(var(--cyan-rgb),.55);padding-left:16px} .case-stat .num{font-family:'Space Grotesk';font-weight:600;font-size:clamp(1.9rem,3vw,2.5rem);color:var(--head);line-height:1} .case-stat .lbl{color:var(--muted);font-size:.86rem;margin-top:7px;line-height:1.4} @media(max-width:820px){.case{grid-template-columns:1fr;gap:26px}} /* Platform & Services capability pillars */ .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .cap-list{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:9px} .cap-list li{position:relative;padding-left:17px;color:var(--muted);font-size:.875rem;line-height:1.45} .cap-list li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:2px;background:var(--cyan)} @media(max-width:1000px){.svc-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.svc-grid{grid-template-columns:1fr}} /* ---------- intelligence-layer hero mark ---------- */ .il-grid{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:center} .il-visual{position:relative;aspect-ratio:1;display:grid;place-items:center} .il-visual .ringz{position:absolute;border-radius:50%;border:1px solid var(--hair)} .il-visual .ringz.a{width:78%;height:78%} .il-visual .ringz.b{width:100%;height:100%;border-style:dashed;border-color:rgba(var(--azure-rgb),.25); animation:spin 70s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .il-visual .disc{position:absolute;width:62%;height:62%;border-radius:50%; background:radial-gradient(circle at 38% 30%, #ffffff, #dbe8fb 58%, #b7cdec 100%); border:1px solid rgba(var(--azure-rgb),.18); box-shadow:0 24px 60px -22px rgba(var(--azure-rgb),.5), inset 0 3px 12px rgba(255,255,255,.8); animation:breathe 6s ease-in-out infinite} @keyframes breathe{50%{box-shadow:0 28px 72px -20px rgba(var(--cyan-rgb),.5), inset 0 3px 12px rgba(255,255,255,.8)}} .il-visual .mark{position:relative;z-index:2;width:43%} .il-pair{display:flex;align-items:center;justify-content:center;gap:26px;margin:0 auto 30px;flex-wrap:wrap} .il-pair .il-visual{flex:0 0 auto} .il-mark-disc{flex:0 0 auto;width:150px;height:150px;border-radius:50%;display:grid;place-items:center; background:radial-gradient(circle at 38% 30%, #ffffff, #fbe2ee 58%, #f3c8dd 100%); border:1px solid rgba(193,39,107,.18); box-shadow:0 24px 60px -22px rgba(193,39,107,.42), inset 0 3px 12px rgba(255,255,255,.85)} .il-mark-disc img{width:52%;mix-blend-mode:multiply} .il-join{flex:0 0 auto;font-family:'Space Grotesk';font-weight:300;font-size:1.8rem;color:var(--muted-2);line-height:1} @media(max-width:480px){.il-mark-disc{width:118px;height:118px}.il-pair .il-visual{width:150px!important}.il-join{font-size:1.4rem}} /* ---------- platform mini cards ---------- */ .mini-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:24px;box-shadow:var(--shadow);transition:border-color .25s,transform .25s,box-shadow .25s} .mini-card:hover{border-color:rgba(var(--azure-rgb),.4);transform:translateY(-3px); box-shadow:var(--shadow-lg),var(--elev)} .mini-card .ic{width:40px;height:40px;margin-bottom:14px} .mini-card .ic svg{width:20px;height:20px} .mini-card h4{font-family:'Space Grotesk';font-weight:600;font-size:1.02rem;margin-bottom:7px;color:var(--head)} .mini-card p{color:var(--muted);font-size:.88rem} /* ---------- centered grid CTA ---------- */ .grid-cta{text-align:center;margin-top:30px;color:var(--muted);font-size:.95rem} .grid-cta a{color:var(--cyan);font-family:'Space Grotesk';font-weight:500;white-space:nowrap} .grid-cta a:hover{color:var(--head)} /* ---------- aivortex pipeline flow ---------- */ .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .flow-step{position:relative;padding:26px 22px;border:1px solid var(--line); border-radius:var(--r);background:var(--panel);box-shadow:var(--shadow); transition:border-color .25s,transform .25s,box-shadow .25s} .flow-step:hover{border-color:rgba(var(--azure-rgb),.4);transform:translateY(-3px); box-shadow:var(--shadow-lg),var(--elev)} .flow-step:not(:last-child)::after{content:"";position:absolute;right:-11px;top:50%; width:12px;height:12px;transform:translateY(-50%) rotate(45deg); border-top:1.5px solid var(--cyan);border-right:1.5px solid var(--cyan);opacity:.65;z-index:2} .flow-step .ic{width:40px;height:40px;margin-bottom:14px} .flow-step .ic svg{width:20px;height:20px} .flow-step .step{font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.14em; text-transform:uppercase;color:var(--cyan);margin-bottom:8px} .flow-step h3{font-family:'Space Grotesk';font-weight:600;font-size:1.05rem;margin-bottom:7px;color:var(--head)} .flow-step p{color:var(--muted);font-size:.86rem} @media(max-width:900px){.flow{grid-template-columns:1fr 1fr}.flow-step:not(:last-child)::after{display:none}} @media(max-width:560px){.flow{grid-template-columns:1fr}} /* ---------- product screenshots — crisp framed shot + ambient self-glow ---------- */ .shots{display:grid;grid-template-columns:1fr 1fr;gap:34px} .shot-wrap{position:relative} .shot-glow{display:none}/* light: soft drop-shadow carries depth. dark: enabled below */ .shot{position:relative;z-index:1;border-radius:14px;overflow:hidden; border:1px solid var(--line);background:var(--panel); box-shadow:var(--shadow-lg),var(--elev); transition:transform .35s,box-shadow .35s} .shot:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg),var(--elev)} .shot-bar{display:flex;align-items:center;gap:10px;padding:11px 15px; background:var(--surface);border-bottom:1px solid var(--line)} .shot-bar .dots{display:flex;gap:6px;flex:none} .shot-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--hair)} .shot-bar .url{font-family:'JetBrains Mono';font-size:.7rem;color:var(--muted-2); letter-spacing:.03em;display:inline-flex;align-items:center;gap:7px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .shot img{display:block;width:100%;height:auto} .shot-cap{position:relative;z-index:1;margin-top:18px;color:var(--muted);font-size:.9rem;text-align:center} .shot-cap b{color:var(--head);font-weight:600;font-family:'Space Grotesk'} @media(max-width:820px){.shots{grid-template-columns:1fr;gap:46px}} /* ---------- compact industries list ---------- */ .ind-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px} .ind{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline; padding:18px 0;border-top:1px solid var(--line)} .ind .sx{font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.1em;color:var(--cyan); white-space:nowrap;padding-top:3px} .ind h4{font-family:'Space Grotesk';font-weight:600;font-size:1.02rem;color:var(--head);margin-bottom:4px} .ind p{color:var(--muted);font-size:.88rem} @media(max-width:760px){.ind-grid{grid-template-columns:1fr}} /* ---------- delivery steps ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .step-card{position:relative;padding:28px;border:1px solid var(--line);border-radius:var(--r); background:var(--panel);box-shadow:var(--shadow)} .step-card .no{font-family:'JetBrains Mono';font-size:.78rem;color:var(--cyan)} .step-card h4{font-family:'Space Grotesk';font-weight:600;font-size:1.08rem;margin:13px 0 8px;color:var(--head)} .step-card p{color:var(--muted);font-size:.9rem} /* ---------- presence ---------- */ .offices{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .office{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px; background:var(--panel);box-shadow:var(--shadow)} .office .flag{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-family:'JetBrains Mono';letter-spacing:.1em;color:var(--cyan)} .office .flag img{height:13px;width:auto;border-radius:2px;box-shadow:0 0 0 1px var(--line)} .office h4{font-family:'Space Grotesk';font-weight:600;margin:9px 0 5px;font-size:1.05rem;color:var(--head)} .office p{color:var(--muted);font-size:.84rem} /* ---------- cta band — bold gradient moment (white text) ---------- */ .cta-band{position:relative;border-radius:26px;overflow:hidden;color:#fff; padding:clamp(44px,6vw,80px);text-align:center;border:1px solid transparent; background:linear-gradient(135deg,#1668c8,#0f9a8a); box-shadow:var(--shadow-lg),0 40px 80px -34px rgba(22,104,200,.55)} .cta-band::after{content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(50% 70% at 50% 120%, rgba(255,255,255,.18), transparent 60%), radial-gradient(40% 60% at 80% -20%, rgba(255,255,255,.14), transparent 60%), radial-gradient(40% 60% at 18% -10%, rgba(75,84,214,.3), transparent 60%)} .cta-band::before{content:"";position:absolute;inset:0;pointer-events:none; background:url('img/band-threads.webp') center/cover no-repeat;opacity:.22;mix-blend-mode:screen} .cta-band>*{position:relative;z-index:1} .cta-band h2{margin-top:10px;color:#fff} .cta-band .eyebrow{justify-content:center;color:rgba(255,255,255,.92)} .cta-band .eyebrow::before{background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,.9))} .cta-band .lede{color:rgba(255,255,255,.88);margin:14px auto 0;text-align:center} .cta-band .hero-cta{justify-content:center} .cta-band .btn{background:#fff;color:#1668c8;box-shadow:0 12px 30px -14px rgba(0,0,0,.35)} .cta-band .btn:hover{background:#f3f8ff} .cta-band .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)} .cta-band .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff} /* ---------- motion: scroll reveal ---------- */ .rv{opacity:0;transform:translateY(28px) scale(.986);filter:blur(6px); transition:opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1), filter .85s ease} .rv.in{opacity:1;transform:none;filter:none} /* ---------- motion: hero boot sequence (on load) ---------- */ @keyframes bootUp{from{opacity:0;transform:translateY(30px);filter:blur(9px)} to{opacity:1;transform:none;filter:none}} .hero-inner .badge,.hero-inner h1,.hero-inner .sub, .hero-inner .hero-cta,.console-wrap{ animation:bootUp .95s cubic-bezier(.22,.61,.36,1) both} .hero-inner h1{animation-delay:.07s} .hero-inner .sub{animation-delay:.16s} .hero-inner .hero-cta{animation-delay:.26s} .console-wrap{animation-delay:.46s;animation-duration:1.15s} /* ---------- motion: ambient ---------- */ .gradtext{background-size:220% auto;animation:shimmer 7s linear infinite} @keyframes shimmer{to{background-position:220% center}} .console{animation:floaty 7s ease-in-out infinite} @keyframes floaty{50%{transform:translateY(-7px)}} /* ---------- motion: card cursor spotlight ---------- */ .card{--mx:50%;--my:0} .card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; opacity:0;transition:opacity .35s ease; background:radial-gradient(360px circle at var(--mx) var(--my), rgba(var(--azure-rgb),.12), transparent 62%)} .card:hover::after{opacity:1} /* ========================================================= DARK-only decorative overrides (alpha/structure that can't reduce to a single tokenized rule) ========================================================= */ [data-theme="dark"] body::before{ background: radial-gradient(40% 26% at 82% -2%, rgba(46,155,255,.16), transparent 70%), radial-gradient(36% 24% at 6% 6%, rgba(111,123,255,.12), transparent 72%), radial-gradient(60% 40% at 50% 108%, rgba(25,224,208,.10), transparent 70%); } [data-theme="dark"] body::after{opacity:.04} [data-theme="dark"] .hero-aurora{ background: radial-gradient(38% 42% at 50% 72%, rgba(46,155,255,.55), transparent 62%), radial-gradient(30% 32% at 42% 84%, rgba(25,224,208,.40), transparent 60%), radial-gradient(34% 34% at 60% 86%, rgba(111,123,255,.34), transparent 60%), radial-gradient(60% 50% at 50% 120%, rgba(46,155,255,.18), transparent 60%); filter:blur(18px);opacity:.9} [data-theme="dark"] .cta-band{ background:linear-gradient(180deg,rgba(16,22,38,.9),rgba(8,11,20,.9)); border:1px solid var(--line);box-shadow:var(--shadow-lg)} [data-theme="dark"] .cta-band::after{ background: radial-gradient(50% 70% at 50% 120%, rgba(46,155,255,.45), transparent 60%), radial-gradient(40% 60% at 80% -20%, rgba(25,224,208,.32), transparent 60%), radial-gradient(40% 60% at 18% -10%, rgba(111,123,255,.3), transparent 60%)} [data-theme="dark"] .cta-band .btn{background:var(--grad);color:var(--btn-ink); box-shadow:0 10px 30px -12px rgba(46,155,255,.8)} [data-theme="dark"] .cta-band .btn:hover{background:var(--grad)} [data-theme="dark"] .cta-band .btn.ghost{background:var(--glass);color:var(--ink);border-color:var(--line)} [data-theme="dark"] .shot-glow{display:block;position:absolute;inset:6% 3% 12%;z-index:0; border-radius:34px;filter:blur(48px) saturate(1.35);opacity:.42;transform:scale(1.05); pointer-events:none;-webkit-user-select:none;user-select:none} /* ---------- responsive ---------- */ @media(max-width:1180px){ .brand .pw,.brand .sep{display:none} } @media(max-width:980px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr)} .offices{grid-template-columns:repeat(2,1fr)} .strip{grid-template-columns:repeat(2,1fr)} .arch-layer{grid-template-columns:1fr;gap:14px} .il-grid{grid-template-columns:1fr;gap:30px} .il-visual{max-width:320px;margin:0 auto} .foot-grid{grid-template-columns:1fr 1fr 1fr} .foot-grid .about{grid-column:span 3;max-width:48ch} } @media(max-width:1060px){ .navlinks{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column; align-items:stretch;gap:0;background:var(--nav-pop);border-bottom:1px solid var(--line);padding:8px 0} .navlinks.open{display:flex} .navlinks a{padding:13px 26px} .navlinks .btn{margin:10px 26px;text-align:center;justify-content:center} .navlinks .theme-toggle{margin:10px 26px;width:auto} } @media(max-width:720px){ .splithead{grid-template-columns:1fr} .g2,.g3,.g4{grid-template-columns:1fr} .console-tabs{display:none} .foot-grid{grid-template-columns:1fr 1fr} .foot-grid .about{grid-column:span 2} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .rv{opacity:1;transform:none} }