:root {
      --ink: #f5f8ff;
      --muted: #afbdd5;
      --deep: #050b17;
      --navy: #07172c;
      --panel: rgba(14, 27, 52, .70);
      --stroke: rgba(182, 217, 255, .14);
      --blue: #75a9ff;
      --cyan: #65e7fb;
      --violet: #936cff;
      --mint: #66f0c8;
      --shadow: 0 34px 90px rgba(0, 0, 0, .52);
      --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; background: var(--deep); }
    body {
      margin: 0;
      min-width: 320px;
      overflow-x: hidden;
      color: var(--ink);
      background: var(--deep);
      font-family: var(--font);
    }
    button, a { font: inherit; }
    button { -webkit-tap-highlight-color: transparent; }

    .hero {
      min-height: 100svh;
      isolation: isolate;
      overflow: hidden;
      position: relative;
      background:
        radial-gradient(circle at 50% 50%, rgba(87, 146, 250, .18), transparent 23%),
        radial-gradient(circle at 14% 12%, rgba(111, 81, 255, .14), transparent 29%),
        radial-gradient(circle at 87% 81%, rgba(16, 197, 230, .10), transparent 28%),
        linear-gradient(155deg, #0a1730 0%, #06101e 54%, #020914 100%);
    }
    #matrixCanvas, .hero-glow, .hero-grid, .hero-vignette, .noise {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    #matrixCanvas { z-index: -5; width: 100%; height: 100%; }
    .hero-glow {
      z-index: -4;
      background:
        radial-gradient(ellipse 36% 22% at 50% 50%, rgba(122, 188, 255, .24), transparent 72%),
        radial-gradient(circle at 76% 20%, rgba(111, 235, 255, .08), transparent 22%);
      filter: blur(4px);
    }
    .hero-grid {
      z-index: -3;
      opacity: .13;
      background-image:
        linear-gradient(rgba(116, 174, 255, .19) 1px, transparent 1px),
        linear-gradient(90deg, rgba(116, 174, 255, .19) 1px, transparent 1px);
      background-size: 84px 84px;
      mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0,0,0,.56) 44%, transparent 79%);
    }
    .hero-vignette { z-index: -2; background: radial-gradient(ellipse at center, transparent 32%, rgba(0, 4, 13, .20) 58%, rgba(0, 3, 12, .87) 100%); }
    .noise {
      z-index: 12;
      opacity: .04;
      mix-blend-mode: soft-light;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
    }

    .topbar {
      width: min(1280px, calc(100% - 48px));
      height: 92px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(205, 232, 255, .08);
      position: relative;
      z-index: 10;
    }
    .brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 1.58rem; font-weight: 850; letter-spacing: -.07em; }
    .brand svg { width: 37px; height: 37px; filter: drop-shadow(0 7px 14px rgba(98,164,255,.34)); }
    .brand i { color: #d7e0ff; font-style: normal; }
    .nav-group, .nav-links, .nav-actions { display: flex; align-items: center; }
    .nav-group { gap: 29px; }
    .nav-links { gap: 24px; }
    .nav-links a { color: rgba(238, 246, 255, .78); text-decoration: none; font-size: .86rem; font-weight: 700; position: relative; }
    .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 2px; border-radius: 99px; background: linear-gradient(90deg, var(--cyan), var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; box-shadow: 0 0 12px var(--cyan); }
    .nav-links a:hover, .nav-links a.active { color: #fff; }
    .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
    .nav-actions { gap: 10px; }
    .btn { min-height: 42px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid transparent; text-decoration: none; cursor: pointer; font-size: .82rem; font-weight: 800; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
    .btn:hover { transform: translateY(-2px); }
    .btn-outline { color: #eff6ff; background: rgba(12, 28, 53, .42); border-color: rgba(175, 213, 255, .40); }
    .btn-primary { color: white; background: linear-gradient(100deg, #5b88ed, #7e9fff); border-color: rgba(198, 223, 255, .43); box-shadow: 0 10px 28px rgba(82, 139, 248, .34), inset 0 1px 0 rgba(255,255,255,.28); }

    .hero-inner {
      width: min(1280px, calc(100% - 48px));
      min-height: calc(100svh - 92px);
      margin: 0 auto;
      display: grid;
      place-items: center;
      position: relative;
      padding: 112px 0 126px;
    }
    .hero-copy { width: min(820px, 100%); position: relative; z-index: 4; padding: 40px 16px; text-align: center; }
    .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid rgba(146, 199, 255, .22); border-radius: 999px; color: #cbdcff; background: rgba(16, 38, 68, .52); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 28px rgba(6,20,48,.2); backdrop-filter: blur(10px); font-size: .70rem; font-weight: 850; text-transform: uppercase; letter-spacing: .12em; }
    .eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 16px var(--mint); }
    .hero-brand { margin: 22px 0 9px; display: flex; align-items: center; justify-content: center; gap: 18px; font-size: clamp(4rem, 10vw, 8.15rem); font-weight: 900; letter-spacing: -.096em; line-height: .88; text-shadow: 0 12px 42px rgba(1,8,24,.76); }
    .hero-brand svg { width: clamp(58px, 8.5vw, 110px); height: clamp(58px, 8.5vw, 110px); filter: drop-shadow(0 10px 28px rgba(85,181,255,.34)); }
    .hero-brand .co { align-self: flex-end; margin-bottom: .08em; font-size: .62em; color: #ebf2ff; letter-spacing: -.085em; }
    .hero h1 { max-width: 760px; margin: 24px auto 0; color: #f7faff; font-size: clamp(1.22rem, 2.4vw, 2.12rem); line-height: 1.25; letter-spacing: -.047em; font-weight: 540; }
    .hero h1 strong { background: linear-gradient(100deg, #fff 10%, #b9d8ff 50%, #96efff 95%); background-clip: text; -webkit-background-clip: text; color: transparent; }
    .hero p { max-width: 590px; margin: 18px auto 0; color: var(--muted); font-size: clamp(.94rem, 1.4vw, 1.04rem); line-height: 1.7; }
    .hero-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 29px; }
    .hero-actions .btn { min-height: 48px; padding: 0 20px; }
    .proof { margin-top: 19px; display: flex; align-items: center; justify-content: center; gap: 13px; color: #9eb4cf; font-size: .76rem; font-weight: 700; }
    .proof span { display: inline-flex; gap: 6px; align-items: center; }
    .proof svg { width: 14px; height: 14px; fill: none; stroke: var(--mint); stroke-width: 2; }
    .scroll-cue { position: absolute; z-index: 3; bottom: 76px; left: 50%; transform: translateX(-50%); color: rgba(207, 226, 251, .57); text-transform: uppercase; letter-spacing: .13em; font-size: .61rem; font-weight: 800; display: flex; gap: 8px; flex-direction: column; align-items: center; }
    .scroll-cue span { width: 1px; height: 31px; background: linear-gradient(180deg, rgba(116,198,255,.92), transparent); box-shadow: 0 0 12px rgba(115,202,255,.72); }

    .float-card { position: absolute; z-index: 3; width: 182px; padding: 16px; overflow: hidden; border-radius: 15px; border: 1px solid rgba(164,204,255,.13); background: linear-gradient(145deg, rgba(31,53,90,.64), rgba(8,22,44,.72)); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(13px); }
    .float-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(131,193,255,.13), transparent 34%, transparent 70%, rgba(105,96,255,.10)); }
    .float-card h3 { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; color: #e8f1ff; font-size: .72rem; font-weight: 800; }
    .float-card .icon-box { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; color: #b6d9ff; border: 1px solid rgba(169,206,255,.15); border-radius: 8px; background: rgba(144,195,255,.08); }
    .icon-box svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
    .float-card p { position: relative; margin: 9px 0 0; color: #afbdd1; font-size: .68rem; line-height: 1.55; }
    .panel-bars { height: 32px; margin-top: 14px; display: flex; align-items: end; gap: 5px; }
    .panel-bars b { display: block; width: 8px; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #9a8aff, #68d5f2); box-shadow: 0 0 12px rgba(104,213,242,.34); }
    .panel-bars b:nth-child(1){height:42%}.panel-bars b:nth-child(2){height:80%}.panel-bars b:nth-child(3){height:59%}.panel-bars b:nth-child(4){height:100%}.panel-bars b:nth-child(5){height:72%}
    .float-left { top: 22%; left: 4.2%; transform: rotate(-3deg); }
    .float-right { top: 50%; right: 3.7%; transform: rotate(3deg); }
    .float-bottom-left { bottom: 10%; left: 8.4%; width: 218px; transform: rotate(1deg); }
    .float-bottom-right { bottom: 8%; right: 10%; width: 218px; transform: rotate(-2deg); }
    .team { display: flex; align-items: center; margin-top: 11px; }
    .avatar { width: 24px; height: 24px; border: 2px solid #142747; border-radius: 50%; margin-right: -7px; background: linear-gradient(135deg,#78e0ff,#5667cc); }
    .avatar:nth-child(2){background:linear-gradient(135deg,#957dff,#e186e3)} .avatar:nth-child(3){background:linear-gradient(135deg,#6ee6b6,#3898c9)}
    .live { margin-top: 11px; display: flex; justify-content: space-between; align-items: center; }
    .live b { color: #a9ffc9; font-size: .65rem; }
    .live i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #67f1ba; box-shadow: 0 0 10px #67f1ba; }
    .tiny-progress { width: 70px; height: 4px; border-radius: 99px; background: linear-gradient(90deg,#66e6dc 0 67%,rgba(182,211,255,.13) 67%); }
    .card-progress { height: 6px; margin-top: 14px; overflow: hidden; border-radius: 99px; background: rgba(203,223,255,.09); }
    .card-progress b { display: block; width: 74%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--violet),var(--cyan)); box-shadow: 0 0 12px rgba(113,194,255,.6); }

    .command-deck { width: min(630px, calc(100% - 80px)); min-height: 56px; position: absolute; z-index: 5; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 9px 10px 9px 15px; border: 1px solid rgba(184,213,255,.16); border-radius: 12px; background: linear-gradient(95deg, rgba(107,68,185,.91), rgba(26,136,220,.91)); box-shadow: 0 18px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.21); backdrop-filter: blur(16px); }
    .command-orb { width: 19px; height: 19px; border-radius: 50%; border: 1px solid rgba(255,255,255,.48); background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 5px rgba(255,255,255,.09); }
    .command-deck span:nth-child(2) { flex: 1; font-size: .74rem; font-weight: 700; color: rgba(248,252,255,.92); }
    .command-deck nav { display: flex; gap: 13px; }.command-deck nav a { color: rgba(247,251,255,.76); text-decoration: none; font-size: .65rem; font-weight: 740; }
    .command-deck button { border: 0; border-radius: 99px; padding: 9px 13px; cursor: pointer; color: #27467a; background: rgba(255,255,255,.92); font-size: .68rem; font-weight: 850; }

    /* Full-screen showcase flight — transform-only animation keeps the live iframe composited. */
    .showcase { height: 290vh; position: relative; background: #050c19; isolation: isolate; }
    .showcase::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 26% at 50% 22%, rgba(87,116,255,.22), transparent 68%), radial-gradient(ellipse 37% 31% at 88% 77%, rgba(40,214,245,.12), transparent 75%), linear-gradient(180deg,#071528 0%,#07111e 42%,#050b17 100%); z-index: -2; }
    .showcase-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
    .showcase-copy { position: absolute; z-index: 2; top: clamp(30px, 7vh, 78px); left: 50%; width: min(840px, calc(100% - 48px)); transform: translateX(-50%); text-align: center; pointer-events: none; }
    .showcase-copy .eyebrow { font-size: .64rem; padding: 6px 10px; }
    .showcase-copy h2 { margin: 14px auto 0; max-width: 770px; font-size: clamp(1.8rem, 4.4vw, 4.35rem); line-height: 1.02; letter-spacing: -.075em; font-weight: 850; text-wrap: balance; }
    .showcase-copy h2 span { color: #a9d4ff; }
    .showcase-copy p { max-width: 610px; margin: 16px auto 0; color: #b5c4d9; font-size: clamp(.9rem, 1.4vw, 1.05rem); line-height: 1.65; }
    .flight-line { position: absolute; z-index: 1; left: 50%; bottom: 0; width: 1px; height: 71vh; background: linear-gradient(180deg, transparent 0%, rgba(99,229,249,.68) 45%, transparent 100%); box-shadow: 0 0 32px rgba(101, 231, 251, .55); }
    .dashboard-stage { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: auto; perspective: 1400px; transform-style: preserve-3d; }
    .dashboard-window {
      width: 100vw;
      height: 100svh;
      overflow: hidden;
      border: 1px solid rgba(215,234,255,.30);
      border-radius: 24px;
      background: #111b31;
      box-shadow: 0 50px 115px rgba(0,0,0,.58), 0 0 0 1px rgba(97,177,255,.10), inset 0 1px 0 rgba(255,255,255,.28);
      position: relative;
      isolation: isolate;
      contain: paint;
      transform: translate3d(0, 0, 0);
      transform-origin: 50% 75%;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      will-change: transform;
    }
    .dashboard-window::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.76; background: linear-gradient(120deg, rgba(255,255,255,.18), transparent 24%, transparent 68%, rgba(69,157,255,.15)); }
    .dashboard-window::after { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background: radial-gradient(circle at 58% 11%, rgba(135,246,255,.26), transparent 15%), linear-gradient(90deg, transparent 0%, transparent 92%, rgba(255,255,255,.10)); }
    .dashboard-screen { width: 100%; height: 100%; display: block; border: 0; background: #101724; transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .dashboard-frame { pointer-events: auto; }
    .dashboard-window .scanline { pointer-events: none; position: absolute; left: 0; right: 0; z-index: 4; height: 31%; top: -35%; background: linear-gradient(180deg, transparent 0%, rgba(150,239,255,.07) 45%, rgba(255,255,255,.15) 51%, rgba(150,239,255,.06) 58%, transparent 100%); opacity:.76; animation: scan 4.6s linear infinite; }
    .hud { position: absolute; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 9px 12px; color: #eafdff; border: 1px solid rgba(224,247,255,.25); border-radius: 10px; background: rgba(13,29,59,.72); box-shadow: 0 14px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18); backdrop-filter: blur(10px); font-size: .70rem; font-weight: 800; letter-spacing: .01em; }
    .hud i { width: 7px; height: 7px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px var(--mint); }
    .hud-left { top: 21px; left: 21px; }.hud-right { top: 21px; right: 21px; }
    @keyframes scan { from { transform: translateY(-30%); } to { transform: translateY(460%); } }

    /* Work carousel */
    .work { position: relative; padding: 128px 0 120px; overflow: hidden; background: radial-gradient(circle at 18% 24%, rgba(113,80,255,.13), transparent 28%), radial-gradient(circle at 82% 72%, rgba(68,215,250,.12), transparent 29%), #050b17; }
    .work::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.20; background-image: linear-gradient(rgba(107,164,255,.13) 1px, transparent 1px),linear-gradient(90deg, rgba(107,164,255,.13) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(180deg, transparent, #000 15%, #000 83%, transparent); }
    .section-heading { width:min(1220px, calc(100% - 48px)); margin:0 auto 42px; position:relative; z-index:2; text-align:center; }
    .section-heading p { margin:0 auto 13px; color: #91bfff; text-transform:uppercase; font-size:.70rem; letter-spacing:.14em; font-weight:850; }
    .section-heading h2 { max-width: 760px; margin:0 auto; letter-spacing:-.065em; font-size:clamp(2rem, 5vw, 4.8rem); line-height:.98; }
    .section-heading h2 span { color:#92e9fb; }
    .section-heading .body { max-width:560px; margin:18px auto 0; color:#aebdd0; font-size:1rem; line-height:1.7; }
    .marquee { position:relative; z-index:2; overflow:hidden; width:100%; padding: 11px 0 18px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
    .marquee-track { width:max-content; display:flex; gap:16px; padding-right:16px; animation: marquee 34s linear infinite; }
    .marquee:hover .marquee-track, .marquee-track.is-paused { animation-play-state:paused; }
    @keyframes marquee { to { transform: translateX(-50%); } }
    .project-card { width: clamp(210px, 22vw, 300px); min-height: 156px; padding: 20px; text-align:left; color:#eff7ff; border: 1px solid rgba(189,220,255,.14); border-radius: 17px; background: linear-gradient(140deg, rgba(22,39,72,.80), rgba(8,17,36,.86)); box-shadow: 0 16px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07); cursor:pointer; position:relative; overflow:hidden; will-change:transform; transition: transform .32s cubic-bezier(.2,.85,.25,1), border-color .32s ease, box-shadow .32s ease; }
    .project-card::before { content:""; position:absolute; inset:-70% 35% auto -70%; height:170%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(137,231,255,.15), transparent); transition: transform .55s ease; }
    .project-card::after { content:""; position:absolute; left: 18px; right:18px; bottom: 0; height: 2px; border-radius: 99px; transform:scaleX(.18); transform-origin:left; background:linear-gradient(90deg, var(--cyan), var(--violet)); transition:transform .35s ease; }
    .project-card:hover, .project-card:focus-visible, .project-card.is-previewed { outline:none; transform: translateY(-10px) scale(1.015); border-color: rgba(137,222,255,.55); box-shadow: 0 26px 55px rgba(15,142,255,.16), 0 20px 44px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.12); }
    .project-card:hover::before, .project-card:focus-visible::before, .project-card.is-previewed::before { transform: translateX(250%) rotate(20deg); }
    .project-card:hover::after, .project-card:focus-visible::after, .project-card.is-previewed::after { transform:scaleX(1); }
    .project-type { display:inline-flex; padding: 5px 8px; border-radius:99px; color:#b7e7ff; background:rgba(106,176,255,.09); border:1px solid rgba(146,210,255,.12); text-transform:uppercase; letter-spacing:.10em; font-size:.58rem; font-weight:850; }
    .project-brand { display:flex; align-items:center; gap:10px; margin-top:18px; font-size:1.15rem; letter-spacing:-.05em; font-weight:850; }.project-brand b { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; font-size:.82rem; background:linear-gradient(135deg, var(--card-a), var(--card-b)); color:#061323; }.project-card small { display:block; margin-top: 10px; color:#aebed3; font-size:.71rem; line-height:1.45; }
    .work-hint { width:min(1220px, calc(100% - 48px)); margin:26px auto 0; color:#8093ad; text-align:center; font-size:.76rem; font-weight:650; }

    /* Project modal — opens once, stays locked to that brand until its close button is used. */
    .project-modal { position: fixed; inset: 0; z-index: 50; display:grid; place-items:center; padding: 24px; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .28s ease, visibility 0s linear .32s; }
    .project-modal.is-open { visibility:visible; opacity:1; pointer-events:auto; transition:opacity .28s ease; }
    .modal-backdrop { position:absolute; inset:0; opacity:0; pointer-events:auto; background:rgba(2,7,17,.78); backdrop-filter:blur(16px); transition:opacity .36s ease; }
    .project-modal.is-open .modal-backdrop { opacity:1; }
    .modal-panel { pointer-events:auto; width:min(980px, 100%); max-height:min(780px, calc(100svh - 48px)); position:relative; z-index:2; display:grid; grid-template-columns: 1.12fr .88fr; overflow:hidden; border:1px solid rgba(181,222,255,.24); border-radius:23px; background:linear-gradient(145deg, rgba(20,38,70,.98), rgba(6,16,34,.99)); box-shadow:0 40px 110px rgba(0,0,0,.64), inset 0 1px 0 rgba(255,255,255,.10); opacity:0; transform:translateY(28px) scale(.965); filter:blur(8px); clip-path:inset(3% 3% 3% 3% round 26px); will-change:transform, opacity, filter, clip-path; transition:transform .48s cubic-bezier(.18,.84,.24,1), opacity .28s ease, filter .34s ease, clip-path .48s cubic-bezier(.18,.84,.24,1); }
    .project-modal.is-open .modal-panel { opacity:1; transform:translateY(0) scale(1); filter:blur(0); clip-path:inset(0 0 0 0 round 23px); }
    .modal-visual { min-height:410px; position:relative; overflow:hidden; background:#0a1830; }.modal-visual img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; opacity:.90; transform:scale(1.03); }.modal-visual::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg, rgba(102,230,250,.17), transparent 35%, rgba(146,104,255,.18)); mix-blend-mode:screen;}.modal-visual .visual-tag { position:absolute; left:20px; bottom:20px; z-index:2; padding:8px 10px; border:1px solid rgba(224,247,255,.28); border-radius:9px; background:rgba(11,27,55,.72); color:#fff; font-size:.68rem; font-weight:800; backdrop-filter:blur(10px); }
    .modal-content { padding: clamp(26px, 5vw, 52px) clamp(25px, 4vw, 44px); display:flex; flex-direction:column; justify-content:center; }.modal-content .project-type { align-self:flex-start; }.modal-content h3 { margin:16px 0 0; font-size:clamp(2rem, 3.5vw, 3.5rem); line-height:.96; letter-spacing:-.075em; }.modal-content .summary { margin:18px 0 0; color:#b7c4d5; font-size:.95rem; line-height:1.7; }.modal-result { margin:26px 0 0; padding:14px 16px; border-left:2px solid var(--cyan); background:rgba(129,210,255,.06); color:#dff6ff; font-size:.83rem; font-weight:750; line-height:1.5; }.modal-quote { margin:25px 0 0; color:#eaf4ff; font-size:1.02rem; line-height:1.55; letter-spacing:-.018em; }.modal-quote footer { margin-top:10px; color:#8db8de; font-size:.72rem; font-weight:750; }
    .modal-close { width:38px; height:38px; display:grid; place-items:center; position:absolute; top:13px; right:13px; z-index:4; border:1px solid rgba(228,244,255,.22); border-radius:50%; color:white; background:rgba(9,21,44,.71); font-size:1.25rem; cursor:pointer; transition:transform .2s ease, background .2s ease; }.modal-close:hover{transform:rotate(90deg);background:rgba(85,139,240,.72)}

    /* 3 · 2 · 1 project reveal — the selected case study is locked while the launch sequence runs. */
    .project-modal.is-counting { visibility:visible; opacity:1; pointer-events:none; transition:opacity .2s ease; }
    /* Keep the card genuinely hovered while the timer runs: the visual overlay must never steal the pointer. */
    .project-modal.is-counting, .project-modal.is-counting * { pointer-events:none; }
    .project-modal.is-counting .modal-backdrop { opacity:.84; }
    .countdown-stage { position:absolute; inset:0; z-index:3; display:grid; place-items:center; padding:24px; pointer-events:none; opacity:0; visibility:hidden; }
    .countdown-shell { position:relative; display:grid; place-items:center; width:min(320px, calc(100vw - 56px)); aspect-ratio:1; border-radius:50%; border:1px solid rgba(186,231,255,.30); background:radial-gradient(circle at 50% 42%, rgba(59,140,255,.25), rgba(10,27,57,.74) 54%, rgba(3,10,24,.94) 100%); box-shadow:0 0 0 12px rgba(112,181,255,.035), 0 0 90px rgba(67,154,255,.32), inset 0 1px 0 rgba(255,255,255,.14); overflow:hidden; }
    .countdown-shell::before, .countdown-shell::after { content:""; position:absolute; inset:11px; border-radius:50%; border:1px solid rgba(118,216,255,.28); }
    .countdown-shell::before { border-left-color:transparent; border-bottom-color:rgba(143,104,255,.65); transform:rotate(-28deg); }
    .countdown-shell::after { inset:25px; border-color:rgba(191,237,255,.13); border-right-color:rgba(99,232,239,.72); transform:rotate(52deg); }
    .countdown-beam { position:absolute; width:150%; height:1px; left:-25%; top:50%; background:linear-gradient(90deg, transparent, rgba(135,238,255,.88), transparent); box-shadow:0 0 20px rgba(108,218,255,.82); transform:rotate(-26deg); opacity:.74; }
    .countdown-copy { position:relative; z-index:2; display:grid; justify-items:center; gap:10px; text-align:center; }
    .countdown-label { color:#bfe8ff; font-size:.61rem; font-weight:850; letter-spacing:.19em; text-transform:uppercase; }
    .countdown-brand { max-width:240px; color:rgba(238,248,255,.76); font-size:.75rem; font-weight:700; letter-spacing:.01em; }
    .countdown-number { min-width:1ch; color:#fff; font-size:clamp(5.7rem, 17vw, 10.5rem); font-weight:900; line-height:.78; letter-spacing:-.10em; text-shadow:0 0 14px rgba(189,240,255,.92), 0 0 42px rgba(83,163,255,.7), 0 0 88px rgba(124,89,255,.45); transform-origin:50% 55%; }
    .countdown-caption { color:#9fc4e9; font-size:.68rem; font-weight:700; letter-spacing:.055em; }
    .project-modal.is-open .countdown-stage { opacity:0; visibility:hidden; }

    .footer { padding: 30px 24px 44px; background:#040914; border-top:1px solid rgba(166,207,255,.07); color:#7e90aa; text-align:center; font-size:.75rem; }.footer strong{color:#b9d3ef}

    @media (max-width: 1000px) { .nav-links{display:none}.float-left{left:1%}.float-right{right:1%}.float-bottom-left{left:2%}.float-bottom-right{right:3%} }
    @media (max-width: 780px) {
      .topbar, .hero-inner, .section-heading, .work-hint { width: min(100% - 30px, 1280px); }
      .topbar{height:78px}.brand{font-size:1.34rem}.brand svg{width:32px;height:32px}.btn-outline{display:none}
      .hero-inner { min-height: calc(100svh - 78px); padding:54px 0 128px; }.hero-copy{padding:26px 0 42px}.hero-brand{gap:9px}.float-card{opacity:.62;transform:scale(.76)!important}.float-left{top:8%;left:-38px}.float-right{top:auto;bottom:27%;right:-42px}.float-bottom-left,.float-bottom-right{display:none}.scroll-cue{display:none}.command-deck{width:calc(100% - 30px);bottom:24px}.command-deck nav{display:none}
      .showcase{height:250vh}.showcase-copy{top:32px}.showcase-copy p{font-size:.89rem}.hud{padding:7px 9px;font-size:.58rem}.hud-left{top:12px;left:12px}.hud-right{top:12px;right:12px}
      .work{padding:96px 0 88px}.modal-panel{grid-template-columns:1fr;max-height:calc(100svh - 36px);overflow:auto}.modal-visual{min-height:260px;max-height:34svh}.modal-content{padding:28px}.modal-content h3{font-size:2.35rem}.modal-quote{margin-top:18px}.modal-result{margin-top:19px}.project-modal{padding:18px}
    }
    @media (max-width: 480px) { .nav-actions .btn{min-height:37px;padding:0 12px;font-size:.76rem}.hero h1{font-size:1.1rem}.hero p{font-size:.88rem}.hero-actions{gap:9px}.hero-actions .btn{min-height:44px;padding:0 15px}.proof{font-size:.66rem;gap:7px}.proof span:last-child{display:none}.command-deck span:nth-child(2){font-size:.67rem}.command-deck button{padding:9px 11px}.showcase-copy h2{font-size:2rem}.modal-visual{min-height:220px}.modal-content h3{font-size:2.1rem} }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } }
  
    /* =========================================================
       OKNIS EXPERIENCE THEMES — global visual systems
       ========================================================= */
    :root {
      --display-font: var(--font);
      --theme-radius: 18px;
      --theme-accent: var(--cyan);
      --theme-accent-2: var(--violet);
      --theme-surface: rgba(14, 27, 52, .70);
      --theme-surface-strong: rgba(8, 18, 38, .90);
      --theme-paper: #f5f8ff;
      --theme-text: var(--ink);
      --theme-muted: var(--muted);
    }
    html[data-theme] body,
    html[data-theme] .hero,
    html[data-theme] .showcase,
    html[data-theme] .work,
    html[data-theme] .footer,
    html[data-theme] .project-modal,
    html[data-theme] .modal-panel,
    html[data-theme] .command-deck,
    html[data-theme] .float-card,
    html[data-theme] .project-card,
    html[data-theme] .dashboard-window {
      transition: background .55s ease, color .38s ease, border-color .38s ease, box-shadow .38s ease, filter .38s ease;
    }
    .hero h1, .hero-brand, .showcase-copy h2, .section-heading h2, .modal-content h3 {
      font-family: var(--display-font);
    }

    /* The immersive selector is intentionally blocking on first load. */
    body.theme-gate-active { overflow: hidden; }
    .theme-gate {
      position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
      padding: clamp(18px, 4vw, 52px); background: rgba(1, 7, 17, .76);
      backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
      opacity: 1; visibility: visible; transition: opacity .46s ease, visibility 0s linear 0s;
      overflow-y: auto;
    }
    .theme-gate::before, .theme-gate::after {
      content: ""; position: fixed; width: min(58vw, 760px); aspect-ratio: 1; border-radius: 50%;
      pointer-events: none; filter: blur(22px); opacity: .65;
    }
    .theme-gate::before { top: -36%; left: -17%; background: radial-gradient(circle, rgba(91, 151, 255, .33), transparent 67%); }
    .theme-gate::after { right: -15%; bottom: -42%; background: radial-gradient(circle, rgba(117, 72, 255, .28), transparent 66%); }
    .theme-gate.is-leaving { opacity: 0; visibility: hidden; transition: opacity .46s ease, visibility 0s linear .46s; }
    .theme-dialog {
      width: min(1170px, 100%); position: relative; z-index: 1; padding: clamp(25px, 5vw, 56px);
      border: 1px solid rgba(202, 230, 255, .19); border-radius: 28px;
      background: linear-gradient(140deg, rgba(14, 30, 58, .90), rgba(5, 13, 30, .95));
      box-shadow: 0 42px 120px rgba(0, 0, 0, .54), inset 0 1px 0 rgba(255,255,255,.10);
    }
    .theme-dialog::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .65;
      background: linear-gradient(115deg, rgba(150, 226, 255, .11), transparent 29%, transparent 74%, rgba(149, 107, 255, .12));
    }
    .theme-dialog__intro { position: relative; z-index: 1; max-width: 705px; margin: 0 auto 30px; text-align: center; }
    .theme-dialog__kicker {
      display: inline-flex; align-items: center; gap: 8px; margin-bottom: 13px; color: #aeeaff;
      font-size: .68rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase;
    }
    .theme-dialog__kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #74f1cc; box-shadow: 0 0 18px #74f1cc; }
    .theme-dialog h2 { margin: 0; color: #f8fbff; font-size: clamp(2.2rem, 5.5vw, 4.8rem); line-height: .93; letter-spacing: -.078em; }
    .theme-dialog p { max-width: 575px; margin: 16px auto 0; color: #b7c8df; line-height: 1.62; font-size: clamp(.88rem, 1.4vw, 1rem); }
    .theme-options {
      position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
    }
    .theme-choice {
      min-height: 232px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start;
      justify-content: flex-end; gap: 7px; padding: 19px; border: 1px solid rgba(226, 243, 255, .15); border-radius: 18px;
      color: #fff; background: #0d1a32; cursor: pointer; text-align: left;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
      isolation: isolate;
    }
    .theme-choice:hover, .theme-choice:focus-visible { outline: none; transform: translateY(-8px); border-color: rgba(198, 235, 255, .66); box-shadow: 0 22px 44px rgba(0,0,0,.30), 0 0 0 4px rgba(120, 216, 255, .10), inset 0 1px 0 rgba(255,255,255,.16); }
    .theme-choice::before, .theme-choice::after { content: ""; position: absolute; inset: 0; z-index: -1; transition: transform .52s ease; }
    .theme-choice::after { opacity: .42; mix-blend-mode: screen; }
    .theme-choice:hover::before, .theme-choice:focus-visible::before { transform: scale(1.08) rotate(2deg); }
    .theme-choice__index { margin-bottom: auto; color: rgba(255,255,255,.60); font: 800 .61rem/1 var(--font); letter-spacing: .14em; }
    .theme-choice strong { font-size: 1.15rem; letter-spacing: -.04em; }
    .theme-choice small { color: rgba(255,255,255,.76); font-size: .71rem; line-height: 1.42; }
    .theme-choice--futuristic { background: linear-gradient(150deg, #10294f, #11164c 52%, #44278a); }
    .theme-choice--futuristic::before { background: radial-gradient(circle at 74% 21%, #7eeeff 0 3%, transparent 4%), radial-gradient(circle at 57% 42%, rgba(106, 163, 255, .88), transparent 16%), linear-gradient(125deg, transparent 20%, rgba(137, 101, 255, .48) 49%, transparent 50%); }
    .theme-choice--futuristic::after { background-image: linear-gradient(rgba(124,222,255,.38) 1px, transparent 1px), linear-gradient(90deg, rgba(124,222,255,.38) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(circle at 50% 47%, #000, transparent 70%); }
    .theme-choice--jungle { background: linear-gradient(150deg, #102d24, #1b452d 58%, #754611); }
    .theme-choice--jungle::before { background: radial-gradient(ellipse 28% 58% at 21% 42%, #6cb940 0 31%, transparent 33%), radial-gradient(ellipse 35% 64% at 72% 15%, #99d94b 0 24%, transparent 26%), radial-gradient(ellipse 46% 24% at 83% 80%, #c58c30 0 21%, transparent 23%), linear-gradient(135deg, transparent 36%, rgba(10, 44, 28, .58) 37% 48%, transparent 49%); }
    .theme-choice--jungle::after { background: repeating-linear-gradient(126deg, transparent 0 15px, rgba(232, 255, 152, .24) 16px 18px, transparent 19px 38px); }
    .theme-choice--modern { color: #14233b; background: linear-gradient(150deg, #f4f1e9, #dbe9f7 57%, #f9c3b8); border-color: rgba(40,66,99,.14); }
    .theme-choice--modern small, .theme-choice--modern .theme-choice__index { color: rgba(20,35,59,.66); }
    .theme-choice--modern::before { background: radial-gradient(circle at 77% 24%, #ff785f 0 11%, transparent 12%), radial-gradient(circle at 23% 72%, #2798c3 0 18%, transparent 19%), linear-gradient(130deg, transparent 43%, rgba(20,35,59,.10) 44% 52%, transparent 53%); }
    .theme-choice--modern::after { background-image: linear-gradient(90deg, rgba(18,35,59,.14) 1px, transparent 1px), linear-gradient(rgba(18,35,59,.14) 1px, transparent 1px); background-size: 28px 28px; }
    .theme-choice--simple { color: #111; background: #f7f7f4; border-color: rgba(18,18,18,.18); }
    .theme-choice--simple small, .theme-choice--simple .theme-choice__index { color: rgba(18,18,18,.62); }
    .theme-choice--simple::before { background: linear-gradient(90deg, #111 0 7%, transparent 7% 12%, #111 12% 40%, transparent 40% 45%, #111 45% 100%); clip-path: polygon(0 21%,100% 21%,100% 31%,0 31%,0 50%,81% 50%,81% 61%,0 61%,0 78%,100% 78%,100% 86%,0 86%); opacity: .72; }
    .theme-choice--simple::after { background: radial-gradient(circle at 78% 18%, #fff 0 6%, transparent 7%); }
    .theme-choice--editorial { background: linear-gradient(150deg, #340e24, #6c1f41 55%, #b16f38); }
    .theme-choice--editorial::before { background: radial-gradient(circle at 20% 23%, rgba(255,224,176,.88) 0 4%, transparent 5%), radial-gradient(circle at 74% 72%, rgba(255,224,176,.68) 0 3%, transparent 4%), repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,232,193,.19) 19px 20px); }
    .theme-choice--editorial::after { background: linear-gradient(125deg, transparent 27%, rgba(252,216,170,.34) 28% 29%, transparent 30% 65%, rgba(252,216,170,.32) 66% 67%, transparent 68%); }
    .theme-choice--aurora { background: linear-gradient(150deg, #12172d, #125056 52%, #5d2c7d); }
    .theme-choice--aurora::before { background: radial-gradient(ellipse at 36% 8%, rgba(122, 255, 203, .76), transparent 31%), radial-gradient(ellipse at 78% 33%, rgba(116, 189, 255, .72), transparent 33%), radial-gradient(ellipse at 54% 84%, rgba(226, 111, 255, .70), transparent 33%); filter: blur(3px); }
    .theme-choice--aurora::after { background: linear-gradient(170deg, transparent 15%, rgba(181,255,242,.31) 39%, transparent 58%); transform: skewX(-18deg); }
    .theme-dialog__footer { position: relative; z-index: 1; margin: 20px 0 0; color: #8096b6; text-align: center; font-size: .71rem; }
    .theme-reopen {
      position: fixed; right: 18px; bottom: 18px; z-index: 46; display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
      padding: 0 14px; border: 1px solid rgba(224,245,255,.18); border-radius: 999px; color: #ecf7ff; background: rgba(7,19,41,.72);
      box-shadow: 0 14px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(12px);
      cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .32s ease, transform .32s ease, background .22s ease;
      font: 800 .7rem var(--font); letter-spacing: .04em;
    }
    .theme-reopen::before { content:""; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-2)); box-shadow: 0 0 12px var(--theme-accent); }
    body:not(.theme-gate-active) .theme-reopen { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .theme-reopen:hover { background: rgba(28, 54, 92, .88); }

    /* FUTURISTIC — the original language, pushed into an intentional display mode. */
    html[data-theme="futuristic"] {
      --theme-accent: #6beeff; --theme-accent-2: #9874ff; --theme-surface: rgba(13, 30, 59, .74);
    }
    html[data-theme="futuristic"] .hero { background: radial-gradient(circle at 50% 49%, rgba(106, 160, 255, .22), transparent 22%), radial-gradient(circle at 14% 12%, rgba(133, 80, 255, .18), transparent 28%), radial-gradient(circle at 87% 81%, rgba(16, 228, 245, .13), transparent 28%), linear-gradient(155deg, #091a37 0%, #06101e 54%, #020914 100%); }
    html[data-theme="futuristic"] .project-card:hover, html[data-theme="futuristic"] .theme-reopen:hover { box-shadow: 0 24px 58px rgba(37, 150, 255, .22), 0 20px 44px rgba(0,0,0,.30); }

    /* JUNGLE — biophilic system design with humid depth and amber detail. */
    html[data-theme="jungle"] {
      --ink: #f4f5de; --muted: #b8c6a7; --deep: #081a14; --navy: #0c2a20;
      --panel: rgba(15, 56, 39, .72); --stroke: rgba(211, 236, 165, .16);
      --blue: #b4da64; --cyan: #80d778; --violet: #e5a84c; --mint: #c8ec7c;
      --shadow: 0 34px 90px rgba(0, 12, 6, .62); --display-font: Georgia, "Times New Roman", serif;
      --theme-accent: #a5df65; --theme-accent-2: #e5a84c; --theme-surface: rgba(14, 56, 39, .72);
    }
    html[data-theme="jungle"] body { background: #071810; }
    html[data-theme="jungle"] .hero {
      background: radial-gradient(circle at 50% 45%, rgba(148, 217, 96, .18), transparent 21%), radial-gradient(circle at 10% 7%, rgba(105, 171, 77, .20), transparent 32%), radial-gradient(circle at 87% 85%, rgba(228, 164, 61, .14), transparent 27%), linear-gradient(152deg, #153d2b 0%, #0b251a 52%, #06140d 100%);
    }
    html[data-theme="jungle"] .hero::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.24; background: radial-gradient(ellipse 21% 52% at 4% 36%, #80c75a 0 24%, transparent 25%), radial-gradient(ellipse 17% 48% at 96% 66%, #95d066 0 28%, transparent 29%), repeating-linear-gradient(119deg, transparent 0 45px, rgba(225,255,162,.10) 46px 48px, transparent 49px 94px); mix-blend-mode:screen; }
    html[data-theme="jungle"] .hero-grid, html[data-theme="jungle"] .work::before { opacity: .08; filter: hue-rotate(94deg) saturate(.9); }
    html[data-theme="jungle"] .hero-glow { background: radial-gradient(ellipse 36% 22% at 50% 50%, rgba(173, 227, 102, .20), transparent 72%), radial-gradient(circle at 76% 20%, rgba(222, 174, 72, .12), transparent 22%); }
    html[data-theme="jungle"] .showcase::before { background: radial-gradient(ellipse 58% 29% at 50% 22%, rgba(95, 165, 83, .25), transparent 68%), radial-gradient(ellipse 37% 31% at 88% 77%, rgba(218, 159, 65, .13), transparent 75%), linear-gradient(180deg,#103824 0%,#0a271a 43%,#06170f 100%); }
    html[data-theme="jungle"] .work { background: radial-gradient(circle at 18% 24%, rgba(139, 198, 83, .15), transparent 28%), radial-gradient(circle at 82% 72%, rgba(232, 170, 69, .13), transparent 29%), #071a11; }
    html[data-theme="jungle"] .float-card, html[data-theme="jungle"] .project-card, html[data-theme="jungle"] .modal-panel { background: linear-gradient(140deg, rgba(28, 71, 46, .86), rgba(6, 31, 19, .90)); border-color: rgba(202, 235, 150, .18); }
    html[data-theme="jungle"] .command-deck { background: linear-gradient(95deg, rgba(80, 117, 43, .94), rgba(41, 120, 75, .94)); }
    html[data-theme="jungle"] .btn-primary { background: linear-gradient(100deg, #759d39, #c98c3e); border-color: rgba(245,236,167,.36); box-shadow: 0 10px 28px rgba(119, 161, 64, .30), inset 0 1px 0 rgba(255,255,255,.22); }
    html[data-theme="jungle"] .project-card::after, html[data-theme="jungle"] .nav-links a::after { background: linear-gradient(90deg, #9ee36b, #e9ab53); }
    html[data-theme="jungle"] .showcase-copy h2 span, html[data-theme="jungle"] .section-heading h2 span { color: #c9ec81; }
    html[data-theme="jungle"] .footer { background: #05140c; }

    /* MODERN — an airy studio site with editorial contrast. */
    html[data-theme="modern"] {
      --ink: #16233a; --muted: #5f6d80; --deep: #edf2f5; --navy: #e8eef3;
      --panel: rgba(255,255,255,.74); --stroke: rgba(22, 39, 64, .14);
      --blue: #286fa9; --cyan: #1498a9; --violet: #ec6e5b; --mint: #2ca57a;
      --shadow: 0 26px 72px rgba(36, 57, 88, .16); --display-font: var(--font);
      --theme-accent: #1c90a9; --theme-accent-2: #ef765f; --theme-surface: rgba(255,255,255,.80);
    }
    html[data-theme="modern"] body { background: #edf2f5; color: #16233a; }
    html[data-theme="modern"] .hero { background: radial-gradient(circle at 76% 17%, rgba(255, 119, 92, .21), transparent 17%), radial-gradient(circle at 20% 78%, rgba(36, 153, 190, .15), transparent 28%), linear-gradient(145deg, #f6f1e9, #e5f0f4 52%, #f5f6f4); }
    html[data-theme="modern"] .hero::after { content:""; position:absolute; z-index:-1; inset:0; opacity:.34; background: linear-gradient(136deg, transparent 0 38%, rgba(18, 45, 76, .065) 38% 39%, transparent 39% 100%), radial-gradient(circle at 68% 24%, rgba(255,255,255,.85) 0 8%, transparent 8.5%); }
    html[data-theme="modern"] .hero-grid, html[data-theme="modern"] .noise, html[data-theme="modern"] .flight-line { opacity: .08; filter: grayscale(1); }
    html[data-theme="modern"] .hero-vignette { background: radial-gradient(ellipse at center, transparent 30%, rgba(24, 39, 65, .03) 65%, rgba(21, 34, 55, .16) 100%); }
    html[data-theme="modern"] .brand, html[data-theme="modern"] .hero h1, html[data-theme="modern"] .hero-brand, html[data-theme="modern"] .showcase-copy h2, html[data-theme="modern"] .section-heading h2 { color:#15243b; text-shadow:none; }
    html[data-theme="modern"] .brand i { color:#536278; }
    html[data-theme="modern"] .hero h1 strong { background: linear-gradient(100deg, #17253c, #2c799a 57%, #eb6d5a); background-clip:text; -webkit-background-clip:text; }
    html[data-theme="modern"] .topbar { border-color: rgba(20,39,65,.12); }
    html[data-theme="modern"] .nav-links a { color:#4c5a70; }
    html[data-theme="modern"] .nav-links a:hover, html[data-theme="modern"] .nav-links a.active { color:#14243b; }
    html[data-theme="modern"] .eyebrow, html[data-theme="modern"] .btn-outline { color:#263852; background: rgba(255,255,255,.63); border-color:rgba(23,44,72,.17); }
    html[data-theme="modern"] .hero p, html[data-theme="modern"] .showcase-copy p, html[data-theme="modern"] .section-heading .body, html[data-theme="modern"] .float-card p { color:#5f6d80; }
    html[data-theme="modern"] .showcase::before { background: radial-gradient(ellipse 60% 26% at 50% 22%, rgba(44,145,179,.16), transparent 68%), radial-gradient(ellipse 37% 31% at 88% 77%, rgba(238,111,93,.13), transparent 75%), linear-gradient(180deg,#e5eff2 0%,#edf2f3 42%,#e8ecef 100%); }
    html[data-theme="modern"] .work { background: radial-gradient(circle at 18% 24%, rgba(43,153,188,.12), transparent 28%), radial-gradient(circle at 82% 72%, rgba(239,115,97,.13), transparent 29%), #edf2f5; }
    html[data-theme="modern"] .float-card, html[data-theme="modern"] .project-card, html[data-theme="modern"] .modal-panel { color:#1c2c44; background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(231,239,244,.96)); border-color:rgba(21,41,67,.14); box-shadow:0 18px 45px rgba(29,55,85,.12), inset 0 1px 0 rgba(255,255,255,.9); }
    html[data-theme="modern"] .float-card h3, html[data-theme="modern"] .project-card, html[data-theme="modern"] .modal-content h3, html[data-theme="modern"] .modal-quote { color:#1a2a42; }
    html[data-theme="modern"] .project-card small, html[data-theme="modern"] .modal-content .summary { color:#627188; }
    html[data-theme="modern"] .project-type { color:#176a81; background:rgba(20,152,169,.09); border-color:rgba(20,152,169,.14); }
    html[data-theme="modern"] .project-brand b { color:#fff; }
    html[data-theme="modern"] .btn-primary { background: linear-gradient(100deg,#287f9a,#eb755f); box-shadow:0 10px 28px rgba(39,122,152,.23); }
    html[data-theme="modern"] .command-deck { color:#fff; background:linear-gradient(95deg, rgba(27,100,121,.93), rgba(210,87,73,.93)); }
    html[data-theme="modern"] .hud { background:rgba(255,255,255,.84); color:#19304c; border-color:rgba(23,47,75,.17); }
    html[data-theme="modern"] .dashboard-window { border-color:rgba(30,55,80,.20); background:#e7edf2; }
    html[data-theme="modern"] .footer { background:#e5eaed; border-color:rgba(20,39,65,.12); color:#647287; }
    html[data-theme="modern"] .footer strong { color:#263b57; }
    html[data-theme="modern"] .theme-reopen { color:#1f304a; background:rgba(255,255,255,.82); border-color:rgba(25,50,80,.15); }

    /* SIMPLE — clear monochrome hierarchy, no decoration competing with content. */
    html[data-theme="simple"] {
      --ink: #121212; --muted: #666; --deep: #fff; --navy: #fafafa; --panel: #fff;
      --stroke: rgba(18,18,18,.14); --blue: #111; --cyan: #111; --violet: #111; --mint: #111;
      --shadow: 0 16px 32px rgba(0,0,0,.08); --display-font: var(--font);
      --theme-accent: #111; --theme-accent-2: #111; --theme-surface: #fff;
    }
    html[data-theme="simple"] body { background:#fff; color:#111; }
    html[data-theme="simple"] .hero { min-height:auto; background:#fff; border-bottom:1px solid #111; }
    html[data-theme="simple"] #matrixCanvas, html[data-theme="simple"] .hero-glow, html[data-theme="simple"] .hero-grid, html[data-theme="simple"] .hero-vignette, html[data-theme="simple"] .noise, html[data-theme="simple"] .float-card, html[data-theme="simple"] .scroll-cue, html[data-theme="simple"] .flight-line, html[data-theme="simple"] .dashboard-window::before, html[data-theme="simple"] .dashboard-window::after, html[data-theme="simple"] .scanline { display:none !important; }
    html[data-theme="simple"] .topbar { border-color:#111; }
    html[data-theme="simple"] .brand, html[data-theme="simple"] .hero-brand, html[data-theme="simple"] .hero h1, html[data-theme="simple"] .showcase-copy h2, html[data-theme="simple"] .section-heading h2 { color:#111; text-shadow:none; }
    html[data-theme="simple"] .brand i { color:#111; }
    html[data-theme="simple"] .hero h1 strong { color:#111; background:none; -webkit-text-fill-color:#111; }
    html[data-theme="simple"] .hero p, html[data-theme="simple"] .showcase-copy p, html[data-theme="simple"] .section-heading .body, html[data-theme="simple"] .project-card small { color:#606060; }
    html[data-theme="simple"] .nav-links a { color:#444; } html[data-theme="simple"] .nav-links a:hover, html[data-theme="simple"] .nav-links a.active { color:#111; }
    html[data-theme="simple"] .nav-links a::after, html[data-theme="simple"] .project-card::after { height:1px; background:#111; box-shadow:none; }
    html[data-theme="simple"] .eyebrow, html[data-theme="simple"] .btn-outline { color:#111; background:#fff; border-color:#111; box-shadow:none; backdrop-filter:none; }
    html[data-theme="simple"] .eyebrow-dot { background:#111; box-shadow:none; }
    html[data-theme="simple"] .btn { border-radius:2px; } html[data-theme="simple"] .btn-primary { color:#fff; background:#111; border-color:#111; box-shadow:none; }
    html[data-theme="simple"] .showcase { height:205vh; background:#f5f5f2; } html[data-theme="simple"] .showcase::before { background:#f5f5f2; }
    html[data-theme="simple"] .work { background:#fff; padding-top:92px; } html[data-theme="simple"] .work::before { display:none; }
    html[data-theme="simple"] .section-heading p, html[data-theme="simple"] .showcase-copy h2 span { color:#111; }
    html[data-theme="simple"] .project-card, html[data-theme="simple"] .modal-panel { color:#111; border:1px solid #111; border-radius:0; background:#fff; box-shadow:none; }
    html[data-theme="simple"] .project-card:hover, html[data-theme="simple"] .project-card.is-previewed { transform:translateY(-5px); border-color:#111; box-shadow:8px 8px 0 #111; }
    html[data-theme="simple"] .project-card::before { display:none; }
    html[data-theme="simple"] .project-type { color:#111; background:#fff; border-color:#111; border-radius:0; }
    html[data-theme="simple"] .modal-content .summary, html[data-theme="simple"] .modal-result, html[data-theme="simple"] .modal-quote footer { color:#5c5c5c; }
    html[data-theme="simple"] .modal-result { border-color:#111; background:#f4f4f4; color:#111; }
    html[data-theme="simple"] .modal-close { color:#111; background:#fff; border-color:#111; border-radius:0; }
    html[data-theme="simple"] .command-deck { border-color:#111; border-radius:0; color:#fff; background:#111; box-shadow:none; backdrop-filter:none; }
    html[data-theme="simple"] .dashboard-window { border:1px solid #111; border-radius:0; box-shadow:12px 12px 0 #111; filter:grayscale(1) contrast(1.04); }
    html[data-theme="simple"] .hud { color:#111; border-color:#111; border-radius:0; background:#fff; box-shadow:none; backdrop-filter:none; }
    html[data-theme="simple"] .footer { background:#fff; border-color:#111; color:#555; } html[data-theme="simple"] .footer strong{color:#111;}
    html[data-theme="simple"] .theme-reopen { color:#fff; background:#111; border-color:#111; box-shadow:none; backdrop-filter:none; border-radius:2px; }

    /* EDITORIAL — a premium print-inspired composition with warm paper and wine ink. */
    html[data-theme="editorial"] {
      --ink: #351126; --muted: #745b63; --deep: #f3ead9; --navy: #ede0cc;
      --panel: rgba(255,250,239,.78); --stroke: rgba(81, 28, 54, .19);
      --blue: #7f2546; --cyan: #a55452; --violet: #934571; --mint: #c3914a;
      --shadow: 0 28px 72px rgba(72, 27, 42, .17); --display-font: Georgia, "Times New Roman", serif;
      --theme-accent: #8d294d; --theme-accent-2: #bd9149; --theme-surface: rgba(255,249,237,.84);
    }
    html[data-theme="editorial"] body { background:#f3ead9; color:#351126; }
    html[data-theme="editorial"] .hero { background: radial-gradient(circle at 75% 20%, rgba(186,133,65,.21), transparent 20%), radial-gradient(circle at 20% 77%, rgba(128,36,72,.13), transparent 29%), linear-gradient(145deg,#f8f0e1,#efe2cb 56%,#ecd8bf); }
    html[data-theme="editorial"] .hero::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.42; background: repeating-linear-gradient(90deg, transparent 0 108px, rgba(87,31,53,.09) 109px 110px), linear-gradient(128deg, transparent 0 44%, rgba(89,31,54,.085) 44% 45%, transparent 45%); }
    html[data-theme="editorial"] #matrixCanvas, html[data-theme="editorial"] .hero-grid { opacity:.18; filter: sepia(1) hue-rotate(292deg) saturate(.7); }
    html[data-theme="editorial"] .hero-vignette { background: radial-gradient(ellipse at center, transparent 32%, rgba(66,23,40,.05) 65%, rgba(66,23,40,.19) 100%); }
    html[data-theme="editorial"] .brand, html[data-theme="editorial"] .hero-brand, html[data-theme="editorial"] .hero h1, html[data-theme="editorial"] .showcase-copy h2, html[data-theme="editorial"] .section-heading h2 { color:#401329; text-shadow:none; }
    html[data-theme="editorial"] .brand i { color:#7b354f; }
    html[data-theme="editorial"] .hero h1 strong { background:linear-gradient(100deg,#48152e,#8c2b4c 55%,#b68542); background-clip:text; -webkit-background-clip:text; }
    html[data-theme="editorial"] .topbar { border-color:rgba(77,26,46,.17); }
    html[data-theme="editorial"] .nav-links a { color:#715260; } html[data-theme="editorial"] .nav-links a:hover, html[data-theme="editorial"] .nav-links a.active { color:#42142a; }
    html[data-theme="editorial"] .eyebrow, html[data-theme="editorial"] .btn-outline { color:#572039; background:rgba(255,249,238,.65); border-color:rgba(87,31,55,.20); box-shadow:none; }
    html[data-theme="editorial"] .eyebrow-dot { background:#b98d45; box-shadow:0 0 14px rgba(185,141,69,.55); }
    html[data-theme="editorial"] .hero p, html[data-theme="editorial"] .showcase-copy p, html[data-theme="editorial"] .section-heading .body, html[data-theme="editorial"] .float-card p { color:#775f65; }
    html[data-theme="editorial"] .showcase::before { background:radial-gradient(ellipse 60% 25% at 50% 22%,rgba(129,36,75,.13),transparent 68%), radial-gradient(ellipse 37% 31% at 88% 77%,rgba(185,137,66,.15),transparent 75%),linear-gradient(180deg,#eadbc5 0%,#f3ead9 44%,#ebdcc9 100%); }
    html[data-theme="editorial"] .work { background:radial-gradient(circle at 18% 24%,rgba(136,38,77,.10),transparent 28%),radial-gradient(circle at 82% 72%,rgba(189,144,71,.15),transparent 29%),#f3ead9; }
    html[data-theme="editorial"] .float-card, html[data-theme="editorial"] .project-card, html[data-theme="editorial"] .modal-panel { color:#46172e; border-color:rgba(86,31,53,.19); background:linear-gradient(145deg,rgba(255,250,240,.94),rgba(240,224,202,.96)); box-shadow:0 18px 44px rgba(78,29,50,.12), inset 0 1px 0 rgba(255,255,255,.8); }
    html[data-theme="editorial"] .float-card h3, html[data-theme="editorial"] .project-card, html[data-theme="editorial"] .modal-content h3, html[data-theme="editorial"] .modal-quote { color:#46172e; }
    html[data-theme="editorial"] .project-card small, html[data-theme="editorial"] .modal-content .summary { color:#796267; }
    html[data-theme="editorial"] .project-type { color:#7c2748; background:rgba(126,37,72,.07); border-color:rgba(126,37,72,.16); }
    html[data-theme="editorial"] .btn-primary { background:linear-gradient(100deg,#72213f,#b78944); box-shadow:0 10px 28px rgba(116,34,65,.21); }
    html[data-theme="editorial"] .command-deck { background:linear-gradient(95deg,rgba(94,26,51,.93),rgba(164,112,55,.93)); }
    html[data-theme="editorial"] .hud { color:#562039; border-color:rgba(87,30,53,.20); background:rgba(255,249,238,.84); }
    html[data-theme="editorial"] .dashboard-window { border-color:rgba(91,31,55,.20); background:#eddfce; }
    html[data-theme="editorial"] .footer { background:#e9d8c2; border-color:rgba(78,26,47,.18); color:#785a63; } html[data-theme="editorial"] .footer strong { color:#51203a; }
    html[data-theme="editorial"] .theme-reopen { color:#542039; background:rgba(255,249,239,.88); border-color:rgba(85,29,51,.18); }

    /* AURORA — fifth choice: iridescent, soft and expressive rather than cybernetic. */
    html[data-theme="aurora"] {
      --ink:#f7f4ff; --muted:#c9c1dc; --deep:#101427; --navy:#17213d;
      --panel:rgba(28, 37, 75, .70); --stroke:rgba(220, 225, 255, .18);
      --blue:#9dc2ff; --cyan:#77f0d2; --violet:#bd86ff; --mint:#b9f58e;
      --shadow:0 34px 90px rgba(6, 8, 26, .58); --display-font:var(--font);
      --theme-accent:#82ecd9; --theme-accent-2:#c383ff; --theme-surface:rgba(28,37,75,.72);
    }
    html[data-theme="aurora"] .hero { background:radial-gradient(ellipse at 35% 12%,rgba(115,255,202,.25),transparent 30%),radial-gradient(ellipse at 74% 33%,rgba(109,157,255,.23),transparent 34%),radial-gradient(ellipse at 55% 95%,rgba(231,111,255,.22),transparent 35%),linear-gradient(150deg,#1a1740,#0e2441 51%,#2d1454); }
    html[data-theme="aurora"] .hero::after { content:""; position:absolute; inset:-15%; z-index:-1; pointer-events:none; opacity:.54; background:linear-gradient(154deg,transparent 27%,rgba(188,255,238,.24) 39%,transparent 53%); filter:blur(24px); transform:rotate(-8deg); }
    html[data-theme="aurora"] .hero-grid, html[data-theme="aurora"] .work::before { opacity:.13; filter:hue-rotate(140deg); }
    html[data-theme="aurora"] .hero-glow { background:radial-gradient(ellipse 36% 22% at 50% 50%,rgba(123,255,208,.23),transparent 72%),radial-gradient(circle at 76% 20%,rgba(192,123,255,.15),transparent 22%); }
    html[data-theme="aurora"] .showcase::before { background:radial-gradient(ellipse 60% 26% at 50% 22%,rgba(105,220,197,.21),transparent 68%),radial-gradient(ellipse 37% 31% at 88% 77%,rgba(211,122,255,.16),transparent 75%),linear-gradient(180deg,#142443 0%,#15193c 42%,#16102a 100%); }
    html[data-theme="aurora"] .work { background:radial-gradient(circle at 18% 24%,rgba(136,245,199,.14),transparent 28%),radial-gradient(circle at 82% 72%,rgba(212,126,255,.15),transparent 29%),#11152c; }
    html[data-theme="aurora"] .float-card, html[data-theme="aurora"] .project-card, html[data-theme="aurora"] .modal-panel { background:linear-gradient(140deg,rgba(39,54,103,.83),rgba(27,19,65,.91)); border-color:rgba(198,238,255,.19); }
    html[data-theme="aurora"] .command-deck { background:linear-gradient(95deg,rgba(62,55,160,.93),rgba(28,151,137,.93)); }
    html[data-theme="aurora"] .btn-primary { background:linear-gradient(100deg,#438bd5,#b270dc); box-shadow:0 10px 28px rgba(91,124,230,.31); }
    html[data-theme="aurora"] .project-card::after, html[data-theme="aurora"] .nav-links a::after { background:linear-gradient(90deg,#83f0d8,#c083ff); }
    html[data-theme="aurora"] .showcase-copy h2 span, html[data-theme="aurora"] .section-heading h2 span { color:#91f2dd; }
    html[data-theme="aurora"] .footer { background:#0e1124; }

    @media (max-width: 980px) {
      .theme-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .theme-choice { min-height: 188px; }
    }
    @media (max-width: 640px) {
      .theme-gate { padding: 14px; align-items: start; }
      .theme-dialog { margin: 0; padding: 26px 18px 18px; border-radius: 22px; }
      .theme-dialog__intro { margin-bottom: 20px; }
      .theme-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
      .theme-choice { min-height: 146px; padding: 14px; border-radius: 13px; }
      .theme-choice:last-child { grid-column: 1 / -1; min-height: 122px; }
      .theme-choice strong { font-size: 1rem; }
      .theme-dialog__footer { margin-top: 15px; font-size: .64rem; }
      .theme-reopen { right: 12px; bottom: 12px; }
    }


/* v1.2.0 — public CRM access, contact and recovery surfaces */
.nav-links{min-width:0;flex-wrap:wrap;justify-content:flex-end}
.oknis-contact{position:relative;overflow:hidden;padding:clamp(78px,10vw,140px) 24px;background:radial-gradient(circle at 15% 10%,rgba(101,231,251,.12),transparent 30%),radial-gradient(circle at 85% 85%,rgba(147,108,255,.14),transparent 34%),linear-gradient(155deg,#07172c 0%,#040b17 100%);border-top:1px solid var(--stroke)}
.oknis-contact::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(117,169,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(117,169,255,.05) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent)}
.oknis-contact__inner{position:relative;width:min(1180px,100%);margin:auto;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(34px,6vw,84px);align-items:start}
.oknis-contact__copy h2{margin:22px 0 0;font-size:clamp(2.2rem,5vw,4.8rem);line-height:.98;letter-spacing:-.065em;color:var(--ink)}
.oknis-contact__copy>p{margin:24px 0 0;color:var(--muted);font-size:clamp(1rem,1.4vw,1.13rem);line-height:1.75}
.oknis-contact__facts{display:grid;gap:11px;margin-top:30px;color:#d7e6fa;font-size:.86rem;font-weight:750}
.oknis-contact__facts span{display:flex;align-items:center;gap:10px}.oknis-contact__facts span::before{content:"";width:8px;height:8px;border-radius:99px;background:var(--mint);box-shadow:0 0 14px var(--mint)}
.oknis-contact__form{padding:clamp(24px,3vw,38px);border:1px solid rgba(175,213,255,.18);border-radius:24px;background:linear-gradient(145deg,rgba(19,39,72,.84),rgba(7,19,39,.92));box-shadow:0 28px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(16px)}
.oknis-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.oknis-form-grid label,.oknis-auth-modal form label{display:grid;gap:8px;color:#dcecff;font-size:.78rem;font-weight:800;letter-spacing:.01em}
.oknis-form-grid input,.oknis-form-grid select,.oknis-form-grid textarea,.oknis-auth-modal input{width:100%;min-width:0;border:1px solid rgba(173,210,255,.23);border-radius:12px;background:rgba(3,11,24,.72);color:#f6f9ff;padding:13px 14px;outline:none;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.oknis-form-grid textarea{min-height:150px;resize:vertical;line-height:1.55}
.oknis-form-grid input:focus,.oknis-form-grid select:focus,.oknis-form-grid textarea:focus,.oknis-auth-modal input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(101,231,251,.12);background:rgba(5,17,35,.96)}
.oknis-form-grid select{appearance:auto}.oknis-span-2{grid-column:1/-1}.oknis-consent{display:flex!important;grid-template-columns:auto 1fr!important;align-items:flex-start;gap:10px!important;color:#aebfd5!important;font-weight:650!important;line-height:1.5}.oknis-consent input{width:18px;height:18px;margin:2px 0 0;padding:0}.oknis-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.oknis-contact__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}.oknis-contact__actions [data-oknis-contact-status]{color:#b9cbe1;font-size:.85rem;line-height:1.45}.oknis-contact__actions .is-error{color:#ff9cb0}.oknis-contact__actions .is-success{color:#83f1cf}
.oknis-auth-modal{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:22px;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .22s ease,visibility 0s linear .23s}.oknis-auth-modal.is-open{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .22s ease}.oknis-auth-modal__backdrop{position:absolute;inset:0;background:rgba(1,5,14,.84);backdrop-filter:blur(12px)}
.oknis-auth-modal__panel{position:relative;width:min(520px,100%);max-height:calc(100svh - 44px);overflow:auto;padding:clamp(26px,5vw,44px);border:1px solid rgba(183,218,255,.2);border-radius:25px;background:radial-gradient(circle at 100% 0,rgba(117,169,255,.15),transparent 35%),linear-gradient(150deg,#0b1b34,#050d1c);box-shadow:0 38px 110px rgba(0,0,0,.64),inset 0 1px 0 rgba(255,255,255,.08);color:#f6f9ff;transform:translateY(12px) scale(.985);transition:transform .22s ease}.oknis-auth-modal.is-open .oknis-auth-modal__panel{transform:none}
.oknis-auth-modal__close{position:absolute;top:16px;right:16px;width:38px;height:38px;border:1px solid rgba(187,218,255,.2);border-radius:10px;background:rgba(255,255,255,.05);color:#f6f9ff;cursor:pointer;font-size:1.4rem}.oknis-auth-modal__brand{display:flex;align-items:center;gap:11px;margin-bottom:28px;font-size:.83rem;font-weight:900;letter-spacing:.08em}.oknis-auth-modal__brand b{color:var(--cyan)}.oknis-auth-modal__mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--blue),var(--violet));box-shadow:0 9px 25px rgba(117,169,255,.3)}
.oknis-auth-modal__eyebrow{color:#9fc2f3;font-size:.68rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.oknis-auth-modal h2{margin:10px 0 0;color:#fff;font-size:clamp(2rem,6vw,3rem);letter-spacing:-.06em;line-height:1}.oknis-auth-modal p{margin:16px 0 24px;color:#afc0d7;line-height:1.65}.oknis-auth-modal form{display:grid;gap:16px}.oknis-auth-modal__remember{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:9px!important;color:#aebfd5!important;font-weight:650!important}.oknis-auth-modal__remember input{width:17px;height:17px;padding:0}.oknis-auth-modal__submit{width:100%;min-height:49px;margin-top:2px}.oknis-auth-modal__status{min-height:20px;color:#b9cbe1;font-size:.82rem;line-height:1.45}.oknis-auth-modal__status.is-error{color:#ff9cb0}.oknis-auth-modal__status.is-success{color:#83f1cf}.oknis-auth-modal__links{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid rgba(180,214,255,.12)}.oknis-auth-modal__links button,.oknis-auth-modal__back{border:0;padding:0;background:none;color:#a8caff;cursor:pointer;font-size:.79rem;font-weight:800}.oknis-auth-modal__links button:hover,.oknis-auth-modal__back:hover{color:#fff}.oknis-auth-modal__back{margin-top:22px}
body.oknis-modal-open{overflow:hidden!important}
.dashboard-frame[data-src]{background:linear-gradient(120deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04));background-size:200% 100%;animation:oknis-dashboard-loading 1.4s linear infinite}@keyframes oknis-dashboard-loading{to{background-position:-200% 0}}
@media(max-width:980px){.oknis-contact__inner{grid-template-columns:1fr}.nav-links a[data-oknis-nav="crm"]{display:none}}
@media(max-width:680px){.oknis-contact{padding-inline:16px}.oknis-form-grid{grid-template-columns:1fr}.oknis-span-2{grid-column:auto}.oknis-contact__form{border-radius:18px}.oknis-auth-modal{padding:10px}.oknis-auth-modal__panel{max-height:calc(100svh - 20px);border-radius:18px}.oknis-auth-modal__links{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.oknis-auth-modal,.oknis-auth-modal__panel{transition:none}.dashboard-frame[data-src]{animation:none}}