/* ============================================================================ AuroxHost — Design System · aurox.css "Precision infrastructure" — a white canvas, structural blue, engineered type. Author: AuroxHost / Aurox Hosting Solutions Ltd ---------------------------------------------------------------------------- Contents 1. Fonts 6. Buttons 11. Pricing 16. Footer 2. Tokens 7. Labels/badges 12. Steps/flow 17. Utilities 3. Reset/base 8. Navbar/mega-menu 13. Testimonials 18. Motion/a11y 4. Typography 9. Command palette 14. FAQ 19. Responsive 5. Layout 10. Hero / NOC globe 15. CTA band ========================================================================== */ /* 1. FONTS ================================================================= */ @font-face{font-family:'Sora';src:url('../fonts/sora-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Sora';src:url('../fonts/sora-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Sora';src:url('../fonts/sora-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:'Plex Sans';src:url('../fonts/plex-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Plex Sans';src:url('../fonts/plex-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Plex Sans';src:url('../fonts/plex-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Plex Sans';src:url('../fonts/plex-sans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Plex Mono';src:url('../fonts/plex-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Plex Mono';src:url('../fonts/plex-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} /* 2. TOKENS ================================================================ */ :root{ /* paper + tints */ --paper:#ffffff; --surface:#ffffff; /* cards, navbars, panels */ --mist:#f4f7ff; /* alt section background */ --frost:#eef3ff; /* card / inset tint */ --halo:#dfe9ff; /* soft glow fill */ --halo-2:#cddcff; /* ink */ --ink:#0a1a36; /* headings + strong text (deep navy) */ --ink-soft:#26364f; --slate:#53627e; /* muted body */ --slate-2:#7b89a4; --line:#e4eaf6; /* hairline */ --line-2:#eef2fb; /* brand blue */ --aurox:#1b4de4; --aurox-600:#173fc4; --aurox-700:#1233a0; --aurox-deep:#0b2a8f; --sky:#4f86ff; --sky-soft:#e6eeff; /* deep navy surfaces (consoles/terminals/footer) */ --navy:#06122b; --navy-2:#0a1a3a; --navy-3:#12264d; --navy-line:rgba(120,160,240,.14); --navy-ink:#e7eefc; --navy-mut:#95a9d6; /* status semantics */ --up:#12b886; --warn:#f59f00; --down:#f2413f; /* type */ --f-display:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --f-sans:'Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --f-mono:'Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; /* radius */ --r-xs:7px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; /* shadow (blue-tinted, soft) */ --sh-xs:0 1px 2px rgba(10,26,54,.05); --sh-sm:0 2px 8px -2px rgba(12,42,120,.10); --sh:0 10px 30px -12px rgba(12,42,120,.16); --sh-lg:0 30px 70px -24px rgba(12,42,120,.28); --sh-blue:0 22px 48px -18px rgba(27,77,228,.42); /* rhythm */ --pad-x:clamp(1.1rem,4vw,2rem); --sec-y:clamp(4.5rem,9vw,8rem); --maxw:1200px; --maxw-wide:1320px; --maxw-narrow:760px; --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); } /* 3. RESET / BASE ========================================================== */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px} body{ font-family:var(--f-sans); font-size:1rem;line-height:1.65;color:var(--ink-soft); background:var(--paper); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg,video{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:none;cursor:pointer} ul,ol{list-style:none} ::selection{background:rgba(27,77,228,.16);color:var(--ink)} :focus-visible{outline:2.5px solid var(--aurox);outline-offset:3px;border-radius:4px} hr{border:none;border-top:1px solid var(--line)} strong,b{font-weight:600;color:var(--ink)} /* 4. TYPOGRAPHY ============================================================ */ h1,h2,h3,h4,h5{font-family:var(--f-display);color:var(--ink);font-weight:700;line-height:1.1;letter-spacing:-.02em} .d-xl{font-size:clamp(2.55rem,6.2vw,4.6rem);font-weight:800;line-height:1.01;letter-spacing:-.035em} .d-lg{font-size:clamp(2rem,4.4vw,3.15rem);font-weight:700;letter-spacing:-.028em;line-height:1.05} .d-md{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;letter-spacing:-.02em} .d-sm{font-size:clamp(1.18rem,1.8vw,1.4rem);font-weight:600;letter-spacing:-.01em} .lead{font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.6;color:var(--slate)} .muted{color:var(--slate)} .mono{font-family:var(--f-mono)} .ink{color:var(--ink)} .blue{color:var(--aurox)} p{max-width:68ch} /* gradient text — used with restraint */ .grad{background:linear-gradient(100deg,var(--aurox) 0%,var(--sky) 62%,var(--aurox-deep) 100%); -webkit-background-clip:text;background-clip:text;color:transparent;} /* eyebrow / kicker (mono, structural) */ .eyebrow{ display:inline-flex;align-items:center;gap:.55em; font-family:var(--f-mono);font-size:.74rem;font-weight:500; letter-spacing:.18em;text-transform:uppercase;color:var(--aurox); margin-bottom:1.1rem; } .eyebrow::before{content:"";width:1.6rem;height:1px;background:linear-gradient(90deg,var(--aurox),transparent)} .eyebrow.center{justify-content:center} .eyebrow.center::before{background:linear-gradient(90deg,transparent,var(--aurox))} .eyebrow.center::after{content:"";width:1.6rem;height:1px;background:linear-gradient(90deg,var(--aurox),transparent)} /* 5. LAYOUT ================================================================ */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)} .wrap-wide{max-width:var(--maxw-wide)} .wrap-narrow{max-width:var(--maxw-narrow)} .section{padding-block:var(--sec-y);position:relative} .section--mist{background:var(--mist)} .section--tight{padding-block:clamp(3rem,6vw,5rem)} .sec-head{max-width:62ch} .sec-head.center{margin-inline:auto;text-align:center} .sec-head .lead{margin-top:1.1rem} .grid{display:grid;gap:clamp(1rem,2vw,1.6rem)} .hair{height:1px;background:var(--line);border:none} .stack>*+*{margin-top:1rem} .chips{display:flex;flex-wrap:wrap;gap:.5rem} /* skip link */ .skip{position:absolute;left:1rem;top:-64px;z-index:1200;background:var(--ink);color:#fff; padding:.7rem 1.1rem;border-radius:var(--r-sm);font-weight:600;transition:top .2s var(--ease)} .skip:focus{top:1rem} /* 6. BUTTONS =============================================================== */ .btn{ --bg:var(--aurox);--fg:#fff;--bd:transparent; display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--f-sans);font-weight:600;font-size:.95rem;line-height:1; padding:.85em 1.35em;border-radius:var(--r-sm); background:var(--bg);color:var(--fg);border:1.5px solid var(--bd); cursor:pointer;white-space:nowrap;position:relative;isolation:isolate; transition:transform .18s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s; } .btn svg{width:1.05em;height:1.05em;flex:none} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn-primary{--bg:var(--aurox);box-shadow:var(--sh-blue)} .btn-primary:hover{--bg:var(--aurox-600);box-shadow:0 26px 54px -16px rgba(27,77,228,.55)} .btn-dark{--bg:var(--ink);box-shadow:var(--sh)} .btn-dark:hover{--bg:#0f2549} .btn-ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line);box-shadow:var(--sh-xs)} .btn-ghost:hover{--bd:var(--aurox);--fg:var(--aurox);background:var(--sky-soft)} .btn-quiet{--bg:transparent;--fg:var(--ink-soft);--bd:transparent;padding-inline:.6em} .btn-quiet:hover{--fg:var(--aurox);transform:none} .btn-white{--bg:#fff;--fg:var(--aurox);--bd:transparent;box-shadow:var(--sh)} .btn-white:hover{--fg:var(--aurox-700)} .btn-lg{font-size:1.02rem;padding:1.02em 1.7em;border-radius:var(--r)} .btn-sm{font-size:.86rem;padding:.62em 1em} .btn-block{width:100%} .btn .arw{transition:transform .25s var(--ease)} .btn:hover .arw{transform:translateX(3px)} /* 7. LABELS / BADGES / PILLS =============================================== */ .pill{display:inline-flex;align-items:center;gap:.5em;padding:.42em .8em;border-radius:var(--r-pill); font-size:.78rem;font-weight:600;background:var(--frost);color:var(--aurox-700);border:1px solid var(--line)} .pill--soft{background:var(--sky-soft);border-color:transparent} .tag{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; color:var(--slate);background:var(--frost);border:1px solid var(--line);padding:.35em .6em;border-radius:var(--r-xs)} .badge-live{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-mono);font-size:.72rem; font-weight:500;letter-spacing:.08em;color:var(--ink);padding:.4em .7em;border-radius:var(--r-pill); background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-xs)} .dot{width:.55em;height:.55em;border-radius:50%;background:var(--up);position:relative;flex:none} .dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--up);opacity:.6; animation:ping 2.4s var(--ease-out) infinite} .dot.warn{background:var(--warn)} .dot.warn::after{border-color:var(--warn)} .dot.down{background:var(--down)} .dot.down::after{border-color:var(--down)} @keyframes ping{0%{transform:scale(.7);opacity:.7}70%,100%{transform:scale(1.7);opacity:0}} /* 8. NAVBAR + MEGA MENU ==================================================== */ .nav{position:fixed;inset:0 0 auto 0;z-index:1000;transition:transform .4s var(--ease)} .nav-bar{ display:flex;align-items:center;gap:1.5rem;height:70px; padding-inline:var(--pad-x);width:100%;max-width:var(--maxw-wide);margin-inline:auto; } .nav-shell{ position:relative; background:rgba(255,255,255,.72); backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid transparent; transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease); } .nav.scrolled .nav-shell{background:rgba(255,255,255,.9);border-bottom-color:var(--line);box-shadow:var(--sh-sm)} .brand{display:inline-flex;align-items:center;gap:.62rem;font-family:var(--f-display);font-weight:800; font-size:1.24rem;letter-spacing:-.03em;color:var(--ink);flex:none} .brand:hover .brand-mark{transform:rotate(-8deg) scale(1.04)} .brand-mark{width:34px;height:34px;flex:none;transition:transform .4s var(--ease)} .brand small{color:var(--aurox)} .nav-menu{display:flex;align-items:center;gap:.15rem;margin-inline:auto} .nav-item{position:relative} .nav-link{display:inline-flex;align-items:center;gap:.35em;padding:.6em .78em;border-radius:var(--r-sm); font-weight:500;font-size:.94rem;color:var(--ink-soft);transition:color .18s,background .18s} .nav-link:hover,.nav-item:hover .nav-link,.nav-link[aria-expanded=true]{color:var(--aurox);background:var(--sky-soft)} .nav-link .chev{width:.85em;height:.85em;transition:transform .25s var(--ease);opacity:.7} .nav-item:hover .nav-link .chev{transform:rotate(180deg)} .nav-cta{display:flex;align-items:center;gap:.6rem;flex:none} /* mega panel */ .mega{ position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px); width:min(760px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-lg);padding:1.1rem;opacity:0;visibility:hidden;pointer-events:none; transition:opacity .22s var(--ease),transform .28s var(--ease),visibility .22s;z-index:60; } .nav-item:hover .mega,.mega:hover,.mega.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)} .mega::before{content:"";position:absolute;top:-9px;left:0;right:0;height:12px} .mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem} .mega-link{display:flex;gap:.85rem;padding:.75rem;border-radius:var(--r);transition:background .16s,transform .16s} .mega-link:hover{background:var(--mist)} .mega-ic{width:38px;height:38px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center; background:var(--sky-soft);color:var(--aurox)} .mega-ic svg{width:20px;height:20px} .mega-tt{font-weight:600;color:var(--ink);font-size:.94rem;display:flex;align-items:center;gap:.4em} .mega-ds{font-size:.82rem;color:var(--slate);line-height:1.45;margin-top:.1rem} .mega-foot{margin-top:.7rem;padding-top:.85rem;border-top:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:1rem; font-size:.84rem;color:var(--slate)} .mini-new{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.08em;color:var(--up); border:1px solid color-mix(in srgb,var(--up) 40%,transparent);padding:.1em .4em;border-radius:4px} /* nav search trigger */ .nav-search{display:inline-flex;align-items:center;gap:.6rem;height:38px;padding:0 .55rem 0 .8rem; border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--slate); font-size:.86rem;transition:border-color .18s,box-shadow .18s} .nav-search:hover{border-color:var(--aurox);color:var(--ink)} .nav-search kbd{font-family:var(--f-mono);font-size:.72rem;background:var(--frost);border:1px solid var(--line); border-radius:5px;padding:.1em .4em;color:var(--slate)} /* mobile */ .nav-burger{display:none;width:42px;height:42px;border-radius:var(--r-sm);border:1px solid var(--line); background:var(--surface);place-items:center;color:var(--ink)} .nav-burger svg{width:22px;height:22px} .nav-burger .x{display:none} .nav-burger[aria-expanded=true] .x{display:block} .nav-burger[aria-expanded=true] .m{display:none} .drawer{position:fixed;inset:70px 0 0 0;z-index:990;background:var(--surface);padding:1.2rem var(--pad-x) 2rem; overflow-y:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s} .drawer.open{opacity:1;visibility:visible;transform:none} .drawer-sec{border-bottom:1px solid var(--line);padding:.35rem 0} .drawer-sec>summary{display:flex;align-items:center;justify-content:space-between;padding:.95rem .2rem; font-family:var(--f-display);font-weight:600;font-size:1.05rem;color:var(--ink);cursor:pointer;list-style:none} .drawer-sec>summary::-webkit-details-marker{display:none} .drawer-sec>summary .chev{width:1.1em;height:1.1em;transition:transform .25s var(--ease);color:var(--slate)} .drawer-sec[open]>summary .chev{transform:rotate(180deg)} .drawer-links{padding:.2rem 0 .8rem} .drawer-links a{display:flex;align-items:center;gap:.7rem;padding:.7rem .2rem;color:var(--ink-soft);font-weight:500} .drawer-links a:hover{color:var(--aurox)} .drawer-links a svg{width:18px;height:18px;color:var(--aurox);flex:none} .drawer-cta{display:grid;gap:.7rem;margin-top:1.3rem} /* 9. COMMAND PALETTE ======================================================= */ .cmdk-backdrop{position:fixed;inset:0;z-index:1500;background:rgba(6,18,43,.42); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); display:grid;place-items:start center;padding-top:14vh; opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility .2s} .cmdk-backdrop.open{opacity:1;visibility:visible} .cmdk{width:min(600px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-lg);overflow:hidden;transform:translateY(-12px) scale(.98);transition:transform .28s var(--ease-out)} .cmdk-backdrop.open .cmdk{transform:none} .cmdk-in{display:flex;align-items:center;gap:.7rem;padding:1rem 1.2rem;border-bottom:1px solid var(--line)} .cmdk-in svg{width:20px;height:20px;color:var(--slate);flex:none} .cmdk-in input{flex:1;border:none;outline:none;font-size:1.05rem;color:var(--ink);background:none} .cmdk-in input::placeholder{color:var(--slate-2)} .cmdk-in kbd{font-family:var(--f-mono);font-size:.7rem;color:var(--slate);background:var(--frost); border:1px solid var(--line);border-radius:5px;padding:.15em .45em} .cmdk-list{max-height:min(56vh,420px);overflow-y:auto;padding:.5rem} .cmdk-group{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase; color:var(--slate-2);padding:.7rem .8rem .35rem} .cmdk-opt{display:flex;align-items:center;gap:.85rem;padding:.7rem .8rem;border-radius:var(--r);cursor:pointer;color:var(--ink-soft)} .cmdk-opt .ci{width:32px;height:32px;border-radius:var(--r-xs);background:var(--sky-soft);color:var(--aurox); display:grid;place-items:center;flex:none} .cmdk-opt .ci svg{width:17px;height:17px} .cmdk-opt .ct{font-weight:600;color:var(--ink);font-size:.92rem} .cmdk-opt .cd{font-size:.78rem;color:var(--slate)} .cmdk-opt .ck{margin-left:auto;font-family:var(--f-mono);font-size:.7rem;color:var(--slate-2)} .cmdk-opt.sel,.cmdk-opt:hover{background:var(--mist)} .cmdk-opt.sel .ci{background:var(--aurox);color:#fff} .cmdk-empty{padding:2rem;text-align:center;color:var(--slate);font-size:.9rem} .cmdk-foot{display:flex;gap:1.1rem;padding:.7rem 1.2rem;border-top:1px solid var(--line); font-size:.74rem;color:var(--slate-2);font-family:var(--f-mono)} .cmdk-foot span{display:inline-flex;align-items:center;gap:.35em} .cmdk-foot kbd{background:var(--frost);border:1px solid var(--line);border-radius:4px;padding:0 .35em} /* 10. HERO / NOC GLOBE ===================================================== */ .hero{position:relative;padding-top:clamp(7rem,12vh,9rem);padding-bottom:clamp(3rem,6vw,5rem);overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.2rem);align-items:center} .hero-copy{position:relative;z-index:2;max-width:36rem} .hero h1{margin:.2rem 0 1.3rem} .hero .lead{margin-bottom:1.9rem;max-width:34rem} .hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center} .hero-assure{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:1.7rem;font-size:.86rem;color:var(--slate)} .hero-assure span{display:inline-flex;align-items:center;gap:.45em} .hero-assure svg{width:1.05em;height:1.05em;color:var(--up)} /* ambient backdrop */ .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .hero-bg .blueprint{position:absolute;inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:46px 46px;opacity:.5; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000 0%,transparent 72%); mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000 0%,transparent 72%);} .hero-bg .glow{position:absolute;width:60rem;height:60rem;right:-16rem;top:-24rem;border-radius:50%; background:radial-gradient(circle,rgba(79,134,255,.16),rgba(79,134,255,0) 62%);filter:blur(6px)} .hero-bg .glow-2{position:absolute;width:40rem;height:40rem;left:-18rem;bottom:-20rem;border-radius:50%; background:radial-gradient(circle,rgba(27,77,228,.08),transparent 65%)} /* domain search console */ .domain-console{margin-top:2rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh);padding:.5rem;max-width:34rem;position:relative} .dc-bar{display:flex;align-items:center;gap:.6rem;padding:.35rem .35rem .35rem .95rem} .dc-bar>svg{width:20px;height:20px;color:var(--slate-2);flex:none} .dc-bar input{flex:1;border:none;outline:none;background:none;font-size:1.02rem;color:var(--ink);min-width:0} .dc-bar input::placeholder{color:var(--slate-2)} .dc-go{padding:.72em 1.15em;font-size:.9rem} .dc-tlds{display:flex;flex-wrap:wrap;gap:.4rem;padding:.55rem .6rem .35rem;border-top:1px dashed var(--line);margin-top:.3rem} .dc-tld{font-family:var(--f-mono);font-size:.76rem;color:var(--slate);background:var(--mist); border:1px solid var(--line);border-radius:var(--r-pill);padding:.28em .7em;transition:all .15s;cursor:pointer} .dc-tld:hover{color:var(--aurox);border-color:var(--aurox);background:var(--sky-soft)} .dc-tld b{color:var(--ink);font-weight:500} /* globe stage */ .noc{position:relative;z-index:1;aspect-ratio:1;width:100%;max-width:560px;margin-inline:auto} .noc-svg{width:100%;height:auto;overflow:visible} .pop{cursor:default} .noc-badge{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm); box-shadow:var(--sh-sm);padding:.5rem .7rem;font-family:var(--f-mono);z-index:3} .noc-badge .k{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2)} .noc-badge .v{font-size:1rem;color:var(--ink);font-weight:500;display:flex;align-items:center;gap:.4em} .nb-1{top:6%;left:-2%} .nb-2{bottom:9%;right:-3%} .nb-3{bottom:26%;left:-5%} /* trust ticker (client marquee) */ .ticker{border-block:1px solid var(--line);background:var(--paper);overflow:hidden;padding-block:1.4rem} .ticker-row{display:flex;align-items:center;gap:3.5rem;width:max-content;animation:scrollx 34s linear infinite} .ticker:hover .ticker-row{animation-play-state:paused} .ticker-item{font-family:var(--f-mono);font-size:.82rem;letter-spacing:.06em;color:var(--slate); display:inline-flex;align-items:center;gap:.6em;white-space:nowrap} .ticker-item svg{width:16px;height:16px;color:var(--aurox);opacity:.7} @keyframes scrollx{to{transform:translateX(-50%)}} /* 11. STAT STRIP =========================================================== */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .stat{background:var(--surface);padding:clamp(1.3rem,3vw,2rem);text-align:left} .stat-n{font-family:var(--f-display);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.7rem);color:var(--ink); letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline;gap:.08em} .stat-n .u{font-size:.5em;color:var(--aurox);font-weight:700} .stat-l{font-size:.86rem;color:var(--slate);margin-top:.5rem} .stat-sub{font-family:var(--f-mono);font-size:.68rem;color:var(--slate-2);margin-top:.15rem;letter-spacing:.03em} /* 12. CARDS ================================================================ */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.3rem,2.4vw,1.8rem); position:relative;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--halo-2)} .card-ic{width:46px;height:46px;border-radius:var(--r);display:grid;place-items:center;margin-bottom:1.1rem; background:var(--sky-soft);color:var(--aurox);position:relative} .card-ic svg{width:23px;height:23px} .card-ic::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(27,77,228,.18)} .card h3{font-size:1.16rem;margin-bottom:.5rem} .card p{font-size:.92rem;color:var(--slate);line-height:1.6} .card-num{position:absolute;top:1.3rem;right:1.4rem;font-family:var(--f-mono);font-size:.75rem;color:var(--slate-2);letter-spacing:.1em} /* feature grid */ .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)} /* product/plan grid (services) */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)} .svc{display:flex;flex-direction:column;gap:.9rem;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);padding:clamp(1.4rem,2.5vw,1.9rem);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;position:relative;overflow:hidden} .svc::before{content:"";position:absolute;inset:0 0 auto 0;height:3px; background:linear-gradient(90deg,var(--aurox),var(--sky));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)} .svc:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--halo-2)} .svc:hover::before{transform:scaleX(1)} .svc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem} .svc-ic{width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;background:var(--sky-soft);color:var(--aurox);flex:none} .svc-ic svg{width:22px;height:22px} .svc h3{font-size:1.2rem} .svc-desc{font-size:.9rem;color:var(--slate);flex:1} .svc-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.9rem;border-top:1px solid var(--line)} .svc-price{font-family:var(--f-mono);font-size:.86rem;color:var(--ink)} .svc-price b{font-family:var(--f-display);font-size:1.05rem} .svc-link{display:inline-flex;align-items:center;gap:.35em;font-weight:600;font-size:.88rem;color:var(--aurox)} .svc-link .arw{transition:transform .2s var(--ease)} .svc:hover .svc-link .arw{transform:translateX(3px)} /* split feature (image/graphic + text) */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,4rem);align-items:center} .split--rev .split-media{order:2} .split-list{display:grid;gap:1.1rem;margin-top:1.6rem} .split-item{display:flex;gap:.9rem} .split-item .si-ic{width:34px;height:34px;border-radius:var(--r-sm);background:var(--sky-soft);color:var(--aurox); display:grid;place-items:center;flex:none} .split-item .si-ic svg{width:18px;height:18px} .split-item .si-t{font-weight:600;color:var(--ink);font-size:.98rem} .split-item .si-d{font-size:.88rem;color:var(--slate);margin-top:.1rem} /* panel (dark inset visual) */ .panel-dark{background:radial-gradient(120% 120% at 20% 0%,var(--navy-3),var(--navy) 60%); border:1px solid var(--navy-line);border-radius:var(--r-xl);padding:clamp(1.4rem,3vw,2.2rem);color:var(--navy-ink); position:relative;overflow:hidden;box-shadow:var(--sh-lg)} .panel-dark::before{content:"";position:absolute;inset:0; background-image:linear-gradient(var(--navy-line) 1px,transparent 1px),linear-gradient(90deg,var(--navy-line) 1px,transparent 1px); background-size:34px 34px;opacity:.5;-webkit-mask-image:radial-gradient(ellipse at 70% 20%,#000,transparent 75%);mask-image:radial-gradient(ellipse at 70% 20%,#000,transparent 75%)} .panel-dark>*{position:relative} /* terminal */ .term{font-family:var(--f-mono);font-size:.84rem;line-height:1.75;background:rgba(4,12,30,.6); border:1px solid var(--navy-line);border-radius:var(--r);overflow:hidden} .term-bar{display:flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border-bottom:1px solid var(--navy-line); background:rgba(255,255,255,.02)} .term-dot{width:11px;height:11px;border-radius:50%;background:#33456b} .term-dot.r{background:#f2413f} .term-dot.y{background:#f59f00} .term-dot.g{background:#12b886} .term-title{margin-left:auto;color:var(--navy-mut);font-size:.72rem;letter-spacing:.05em} .term-body{padding:1rem 1.1rem;color:#c9d6f5;min-height:150px} .term-body .pl{color:var(--sky)} .term-body .ok{color:var(--up)} .term-body .mut{color:var(--navy-mut)} .term-cur{display:inline-block;width:8px;height:1.05em;background:var(--sky);vertical-align:-2px;animation:blink 1.1s steps(1) infinite} @keyframes blink{50%{opacity:0}} /* map / locations */ .loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .loc{background:var(--surface);padding:1.2rem 1.3rem;display:flex;align-items:center;gap:.9rem;transition:background .2s} .loc:hover{background:var(--mist)} .loc-flag{font-size:1.5rem;line-height:1;flex:none;filter:drop-shadow(0 2px 3px rgba(10,26,54,.12))} .loc-name{font-weight:600;color:var(--ink);font-size:.98rem;display:flex;align-items:center;gap:.4em} .loc-name .cc{font-family:var(--f-mono);font-size:.68rem;color:var(--slate-2);background:var(--frost);border-radius:4px;padding:.05em .35em} .loc-meta{font-size:.8rem;color:var(--slate);margin-top:.15rem;display:flex;gap:.7rem} .loc-lat{font-family:var(--f-mono);color:var(--up)} /* 13. PRICING ============================================================== */ .pricing-toggle{display:inline-flex;align-items:center;gap:.2rem;background:var(--frost);border:1px solid var(--line); border-radius:var(--r-pill);padding:.28rem} .pt-btn{padding:.5em 1.05em;border-radius:var(--r-pill);font-weight:600;font-size:.86rem;color:var(--slate);transition:color .2s} .pt-btn.on{background:var(--surface);color:var(--aurox);box-shadow:var(--sh-xs)} .pt-save{font-family:var(--f-mono);font-size:.66rem;color:var(--up);margin-left:.3em} .cur-toggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;font-family:var(--f-mono);font-size:.78rem} .cur-btn{padding:.4em .7em;color:var(--slate);transition:all .18s} .cur-btn.on{background:var(--aurox);color:#fff} .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.4rem);align-items:stretch} .plan{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl); padding:clamp(1.5rem,2.6vw,2rem);position:relative;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .plan:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--halo-2)} .plan--feat{border-color:transparent;box-shadow:var(--sh-lg);background: linear-gradient(#fff,#fff) padding-box,linear-gradient(140deg,var(--aurox),var(--sky)) border-box;border:1.5px solid transparent} .plan--feat:hover{transform:translateY(-8px)} .plan-flag{position:absolute;top:-1px;right:1.6rem;transform:translateY(-50%); background:linear-gradient(120deg,var(--aurox),var(--sky));color:#fff;font-size:.7rem;font-weight:700; letter-spacing:.05em;padding:.4em .9em;border-radius:var(--r-pill);box-shadow:var(--sh-blue)} .plan-name{font-family:var(--f-display);font-weight:700;font-size:1.3rem;color:var(--ink)} .plan-for{font-size:.84rem;color:var(--slate);margin-top:.2rem;min-height:2.4em} .plan-price{display:flex;align-items:baseline;gap:.12em;margin:1.1rem 0 .1rem} .plan-price .cur{font-family:var(--f-display);font-weight:700;font-size:1.3rem;color:var(--ink);align-self:flex-start;margin-top:.3rem} .plan-price .amt{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,4vw,3rem);color:var(--ink);letter-spacing:-.03em;line-height:1} .plan-price .per{font-size:.9rem;color:var(--slate);font-weight:500} .plan-ngn{font-family:var(--f-mono);font-size:.76rem;color:var(--slate)} .plan-div{height:1px;background:var(--line);margin:1.3rem 0} .plan-feats{display:grid;gap:.72rem;flex:1} .pf{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;color:var(--ink-soft)} .pf svg{width:18px;height:18px;flex:none;margin-top:.1em} .pf .ok{color:var(--up)} .pf .no{color:var(--slate-2)} .pf.off{color:var(--slate-2)} .plan .btn{margin-top:1.5rem} .guarantee{display:flex;align-items:center;gap:.7rem;justify-content:center;margin-top:1.6rem; font-size:.9rem;color:var(--slate);background:var(--frost);border:1px solid var(--line); border-radius:var(--r);padding:.9rem 1.2rem} .guarantee svg{width:20px;height:20px;color:var(--aurox);flex:none} /* comparison table */ .cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem} .cmp th,.cmp td{padding:.9rem 1rem;text-align:left;border-bottom:1px solid var(--line)} .cmp thead th{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);background:var(--mist)} .cmp tbody td:first-child{font-weight:600;color:var(--ink)} .cmp td svg{width:18px;height:18px} .cmp .ok{color:var(--up)} .cmp .no{color:var(--slate-2)} .cmp-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} /* 14. STEPS / DEPLOY FLOW ================================================== */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:step;position:relative} .step{position:relative;padding:0 1.4rem} .step:not(:last-child)::after{content:"";position:absolute;top:22px;right:-1px;width:2px;height:auto} .step-n{width:46px;height:46px;border-radius:var(--r);display:grid;place-items:center;background:var(--surface); border:1.5px solid var(--line);font-family:var(--f-display);font-weight:800;color:var(--aurox); font-size:1.1rem;position:relative;z-index:2;box-shadow:var(--sh-xs)} .step h3{font-size:1.08rem;margin:1rem 0 .4rem} .step p{font-size:.88rem;color:var(--slate)} .steps-line{position:absolute;top:22px;left:8%;right:8%;height:2px; background:repeating-linear-gradient(90deg,var(--halo-2) 0 8px,transparent 8px 16px);z-index:1} /* 15. TESTIMONIALS ========================================================= */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.4rem)} .quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;display:flex;flex-direction:column;gap:1.1rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .quote:hover{transform:translateY(-3px);box-shadow:var(--sh)} .quote-stars{display:flex;gap:.15rem;color:#f5a623} .quote-stars svg{width:16px;height:16px} .quote p{font-size:.95rem;color:var(--ink-soft);line-height:1.6;flex:1} .quote-by{display:flex;align-items:center;gap:.75rem;padding-top:1rem;border-top:1px solid var(--line)} .avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700; font-family:var(--f-display);flex:none;font-size:.95rem} .quote-nm{font-weight:600;color:var(--ink);font-size:.9rem} .quote-rl{font-size:.78rem;color:var(--slate)} .quote-vf{margin-left:auto;font-family:var(--f-mono);font-size:.64rem;color:var(--up);display:flex;align-items:center;gap:.3em} .quote-vf svg{width:13px;height:13px} /* 16. FAQ ================================================================== */ .faq{max-width:820px;margin-inline:auto;border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer; padding:1.35rem .3rem;font-family:var(--f-display);font-weight:600;font-size:clamp(1rem,1.6vw,1.14rem);color:var(--ink);list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary .q-ic{width:26px;height:26px;flex:none;border-radius:50%;border:1.5px solid var(--line); display:grid;place-items:center;color:var(--aurox);transition:transform .3s var(--ease),background .2s,border-color .2s} .faq summary .q-ic svg{width:15px;height:15px} .faq details[open] summary .q-ic{transform:rotate(45deg);background:var(--aurox);color:#fff;border-color:var(--aurox)} .faq-a{padding:0 .3rem 1.4rem;color:var(--slate);font-size:.96rem;line-height:1.7;max-width:70ch} .faq-a a{color:var(--aurox);font-weight:500;border-bottom:1px solid var(--halo-2)} /* 17. CTA BAND ============================================================= */ .cta{position:relative;overflow:hidden;background: radial-gradient(130% 120% at 15% 10%,var(--navy-3),var(--navy) 55%); border-radius:var(--r-xl);padding:clamp(2.5rem,6vw,4.5rem);color:#fff;text-align:center;box-shadow:var(--sh-lg)} .cta::before{content:"";position:absolute;inset:0; background-image:linear-gradient(var(--navy-line) 1px,transparent 1px),linear-gradient(90deg,var(--navy-line) 1px,transparent 1px); background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 72%);mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 72%)} .cta::after{content:"";position:absolute;width:34rem;height:34rem;left:50%;top:-18rem;transform:translateX(-50%); background:radial-gradient(circle,rgba(79,134,255,.32),transparent 62%);pointer-events:none} .cta>*{position:relative} .cta h2{color:#fff;font-size:clamp(1.9rem,4vw,3rem)} .cta .lead{color:var(--navy-mut);margin:1rem auto 2rem;max-width:52ch} .cta-btns{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap} /* 18. FOOTER =============================================================== */ .footer{background:var(--navy);color:var(--navy-mut);position:relative;overflow:hidden; padding-top:clamp(3.5rem,7vw,5.5rem)} .footer::before{content:"";position:absolute;inset:0 0 auto 0;height:1px; background:linear-gradient(90deg,transparent,var(--aurox),transparent);opacity:.6} .foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);padding-bottom:3rem} .foot-brand .brand{color:#fff} .foot-brand .brand small{color:var(--sky)} .foot-desc{font-size:.9rem;line-height:1.65;margin:1.1rem 0 1.4rem;max-width:34ch;color:var(--navy-mut)} .foot-social{display:flex;gap:.6rem} .soc{width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--navy-line);display:grid;place-items:center; color:var(--navy-mut);transition:all .2s var(--ease);background:rgba(255,255,255,.02)} .soc:hover{color:#fff;border-color:var(--aurox);background:var(--aurox);transform:translateY(-2px)} .soc svg{width:19px;height:19px} .foot-col-t{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:1.1rem} .foot-links{display:grid;gap:.7rem} .foot-links a{font-size:.9rem;color:var(--navy-mut);transition:color .18s;display:inline-flex;align-items:center;gap:.45em;width:fit-content} .foot-links a:hover{color:#fff} .foot-links a .nl{font-family:var(--f-mono);font-size:.58rem;color:var(--up);border:1px solid color-mix(in srgb,var(--up) 40%,transparent);border-radius:3px;padding:0 .3em} .foot-contact{display:grid;gap:.85rem;margin-top:.2rem} .foot-ci{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:var(--navy-mut)} .foot-ci svg{width:17px;height:17px;color:var(--sky);flex:none;margin-top:.15em} .foot-ci a:hover{color:#fff} .foot-status{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-mono);font-size:.78rem;color:var(--up); border:1px solid var(--navy-line);border-radius:var(--r-pill);padding:.4em .8em;margin-top:.3rem} .foot-seo{border-top:1px solid var(--navy-line);padding:2.4rem 0;font-size:.84rem;line-height:1.7;color:#7488b5} .foot-seo h2{font-size:1rem;color:#fff;margin-bottom:.7rem;font-family:var(--f-display)} .foot-seo p+p{margin-top:.7rem} .foot-seo strong{color:var(--navy-mut)} .foot-bottom{border-top:1px solid var(--navy-line);padding:1.6rem 0 2.4rem;display:flex;flex-wrap:wrap; gap:1rem;align-items:center;justify-content:space-between} .foot-copy{font-size:.82rem;color:#7488b5;max-width:60ch} .foot-pay{display:flex;gap:.4rem;flex-wrap:wrap} .pay{font-family:var(--f-mono);font-size:.66rem;font-weight:500;letter-spacing:.05em;color:var(--navy-mut); border:1px solid var(--navy-line);border-radius:var(--r-xs);padding:.3em .55em;background:rgba(255,255,255,.02)} .pay.btc{color:#f7931a;border-color:rgba(247,147,26,.3)} .pay.usdt{color:#26a17b;border-color:rgba(38,161,123,.3)} .foot-legal{display:flex;gap:1.1rem;flex-wrap:wrap;font-size:.82rem} .foot-legal a{color:#7488b5} .foot-legal a:hover{color:#fff} /* 19. WHATSAPP FAB ========================================================= */ /* 20. REVEAL / MOTION / A11Y =============================================== */ [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)} [data-reveal].in{opacity:1;transform:none} [data-reveal][data-delay="1"]{transition-delay:.05s} [data-reveal][data-delay="2"]{transition-delay:.1s} [data-reveal][data-delay="3"]{transition-delay:.15s} [data-reveal][data-delay="4"]{transition-delay:.2s} .no-scroll{overflow:hidden} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} [data-reveal]{opacity:1;transform:none} .ticker-row{animation:none} } /* 21. RESPONSIVE =========================================================== */ @media (max-width:1080px){ .nav-menu{display:none} .nav-burger{display:grid} .nav-search .nav-search-txt{display:none} .hero-grid{grid-template-columns:1fr;gap:2.5rem} .noc{max-width:440px;order:-1} .nb-1{left:2%} .nb-2{right:2%} .nb-3{left:0} } @media (max-width:900px){ .feat-grid,.svc-grid,.plans,.quotes{grid-template-columns:1fr 1fr} .stats{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr 1fr;gap:2rem} .steps-line{display:none} .split{grid-template-columns:1fr;gap:2rem} .split--rev .split-media{order:0} .loc-grid{grid-template-columns:1fr 1fr} .foot-top{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1} } @media (max-width:560px){ :root{--sec-y:clamp(3.2rem,10vw,4.5rem)} .feat-grid,.svc-grid,.plans,.quotes,.stats,.loc-grid,.steps{grid-template-columns:1fr} .nav-cta .btn-ghost{display:none} .hero-cta{flex-direction:column;align-items:stretch} .hero-cta .btn{width:100%} .cta-btns{flex-direction:column} .cta-btns .btn{width:100%} .foot-top{grid-template-columns:1fr} .foot-bottom{flex-direction:column;align-items:flex-start} .noc-badge{transform:scale(.86)} } @media (min-width:1400px){:root{--maxw:1240px}} /* ===== PRODUCT / INNER PAGES ============================================== */ .phero{padding-top:clamp(7rem,13vh,9.5rem);padding-bottom:clamp(2.5rem,5vw,4rem)} .phero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center} .phero-single{max-width:820px} .phero .hero-copy{max-width:40rem} .phero h1{margin:.2rem 0 1.2rem} .phero .lead{margin-bottom:1.7rem} .spec-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden} .spec-card-h{padding:1.1rem 1.3rem;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:var(--mist)} .spec-card-h .st{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)} .spec-card-h .sp{font-family:var(--f-display);font-weight:800;color:var(--ink);font-size:1.3rem} .spec-card-h .sp small{font-size:.6em;color:var(--slate);font-weight:500} .spec-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.3rem;border-bottom:1px solid var(--line-2);font-size:.9rem} .spec-row:last-child{border-bottom:none} .spec-row .k{color:var(--slate);display:flex;align-items:center;gap:.55rem} .spec-row .k svg{width:17px;height:17px;color:var(--aurox)} .spec-row .v{font-family:var(--f-mono);color:var(--ink);font-weight:500} .spec-foot{padding:1.1rem 1.3rem} /* inline two-column prose (legal / about) */ .prose{max-width:760px;margin-inline:auto} .prose h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:2.4rem 0 .8rem} .prose h3{font-size:1.1rem;margin:1.6rem 0 .5rem} .prose p,.prose li{color:var(--ink-soft);font-size:1rem;line-height:1.75} .prose p{margin-bottom:1rem} .prose ul{margin:0 0 1.2rem;display:grid;gap:.55rem} .prose ul li{position:relative;padding-left:1.6rem} .prose ul li::before{content:"";position:absolute;left:.1rem;top:.62em;width:.5rem;height:.5rem;border-radius:2px;background:var(--aurox)} .prose a{color:var(--aurox);font-weight:500;border-bottom:1px solid var(--halo-2)} .prose .lead-in{font-size:1.1rem;color:var(--slate);border-left:3px solid var(--aurox);padding-left:1.1rem;margin-bottom:2rem} .legal-meta{font-family:var(--f-mono);font-size:.8rem;color:var(--slate-2);margin-bottom:2rem} .callout{background:var(--frost);border:1px solid var(--line);border-left:3px solid var(--aurox);border-radius:var(--r);padding:1.1rem 1.3rem;margin:1.4rem 0;font-size:.95rem} .callout strong{color:var(--ink)} /* status page */ .status-hero{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between; background:linear-gradient(120deg,rgba(18,184,134,.08),rgba(27,77,228,.05));border:1px solid var(--line); border-radius:var(--r-lg);padding:1.6rem 1.8rem} .status-hero .sh-l{display:flex;align-items:center;gap:1rem} .status-hero .sh-ic{width:52px;height:52px;border-radius:14px;background:color-mix(in srgb,var(--up) 15%,#fff); display:grid;place-items:center;color:var(--up);flex:none} .status-hero .sh-ic svg{width:26px;height:26px} .status-hero h1{font-size:1.5rem} .status-list{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:1.5rem} .status-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.4rem;border-bottom:1px solid var(--line);background:var(--surface)} .status-row:last-child{border-bottom:none} .status-row .sr-n{font-weight:600;color:var(--ink)} .status-row .sr-r{font-family:var(--f-mono);font-size:.78rem;color:var(--slate)} .status-ok{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-mono);font-size:.78rem;color:var(--up);font-weight:500} .uptime-bars{display:flex;gap:2px;align-items:flex-end;height:22px} .uptime-bars i{width:4px;height:100%;background:var(--up);border-radius:1px;opacity:.85} .uptime-bars i.d{background:var(--warn);height:60%} /* contact cards */ .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.4rem)} .contact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;text-align:center;transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .contact-card:hover{transform:translateY(-4px);box-shadow:var(--sh)} .contact-card .cc-ic{width:52px;height:52px;border-radius:14px;background:var(--sky-soft);color:var(--aurox);display:grid;place-items:center;margin:0 auto 1rem} .contact-card .cc-ic svg{width:26px;height:26px} .contact-card h3{font-size:1.1rem;margin-bottom:.35rem} .contact-card p{font-size:.9rem;color:var(--slate);margin-bottom:.9rem} @media (max-width:900px){ .phero-grid{grid-template-columns:1fr;gap:2.2rem} .contact-grid{grid-template-columns:1fr} } /* ============================================================================ v2 — mobile hardening, reviews, typewriter, domain-console ========================================================================== */ /* ---- global overflow guard ---- */ html,body{overflow-x:clip;max-width:100%} .wrap,.wrap-wide,.wrap-narrow{max-width:100%} img,svg{max-width:100%} /* ---- typewriter ---- */ .type-line{display:inline} .type-caret{display:inline-block;width:.06em;min-width:2px;height:1em;background:currentColor; color:var(--aurox);margin-left:.06em;vertical-align:-.08em;border-radius:2px;animation:caret 1s step-end infinite} @keyframes caret{50%{opacity:0}} @media (prefers-reduced-motion:reduce){.type-caret{display:none}} /* ---- reviews / social proof ---- */ .rating-summary{display:flex;align-items:center;gap:clamp(1rem,3vw,2.4rem);flex-wrap:wrap;justify-content:center; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh); padding:clamp(1.4rem,3vw,2rem) clamp(1.4rem,4vw,2.6rem);max-width:760px;margin:0 auto 1.6rem;text-align:center} .rating-big{font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,6vw,3.6rem);color:var(--ink);line-height:1;letter-spacing:-.03em} .rating-mid{text-align:left;min-width:0} .rating-stars{display:inline-flex;gap:.12rem;color:#f5a623;margin-bottom:.3rem} .rating-stars svg{width:18px;height:18px} .rating-mid p{font-size:.92rem;color:var(--slate);margin:0} .rating-mid strong{color:var(--ink)} .rating-cta{margin-left:auto} .rev-plats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,2vw,1.2rem);max-width:760px;margin:0 auto 2.6rem} .rev-plat{display:flex;align-items:center;gap:1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:1.1rem 1.3rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;text-align:left} .rev-plat:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--halo-2)} .rev-plat .rp-badge{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none;font-family:var(--f-display);font-weight:800;font-size:1.1rem;color:#fff} .rev-plat .rp-g{background:conic-gradient(from -45deg,#4285F4,#34A853,#FBBC05,#EA4335,#4285F4)} .rev-plat .rp-t{background:#00b67a} .rev-plat .rp-n{font-weight:600;color:var(--ink);font-size:.95rem;display:flex;align-items:center;gap:.4em} .rev-plat .rp-sub{font-size:.8rem;color:var(--slate)} .rev-plat .rp-score{margin-left:auto;text-align:right;flex:none} .rev-plat .rp-score b{font-family:var(--f-display);font-size:1.25rem;color:var(--ink);display:block;line-height:1} .rev-plat .rp-score .st{color:#f5a623;font-size:.72rem;letter-spacing:1px} .rev-plat .rp-link{color:var(--aurox);font-weight:600;font-size:.82rem} /* ---- domain console: comfortable on phones ---- */ @media (max-width:480px){ .dc-bar{flex-wrap:wrap;padding:.4rem} .dc-bar>svg{position:absolute;left:1rem;top:1.05rem} .dc-bar input{order:1;width:100%;padding:.5rem .5rem .5rem 1.9rem;font-size:1rem} .dc-go{order:2;width:100%;justify-content:center} .domain-console{position:relative} .dc-tlds{gap:.35rem} .dc-tld{font-size:.72rem;padding:.26em .6em} } /* ---- MOBILE NAV: brand + burger only (fixes edge overflow) ---- */ @media (max-width:1024px){ .brand{margin-right:auto} .nav-cta{margin-left:0;gap:.4rem} } @media (max-width:840px){ .nav-search{display:none} .nav-cta .btn{display:none} /* Login + Get started move into the drawer */ .nav-burger{display:grid} .nav-bar{gap:.75rem;height:64px} .brand{font-size:1.12rem} .brand-mark{width:30px;height:30px} .drawer{inset-block-start:64px} } /* ---- globe badges stay inside the frame on phones ---- */ @media (max-width:560px){ .noc{max-width:340px} .noc-badge{transform:scale(.82);transform-origin:center} .nb-1{top:0;left:0} .nb-2{bottom:2%;right:0} .nb-3{display:none} .rating-cta{margin-left:0;width:100%} .rating-cta .btn{width:100%} .rev-plats{grid-template-columns:1fr} .rev-plat{flex-wrap:wrap} .rating-summary{flex-direction:column} .rating-mid{text-align:center} } /* keep hero copy from ever touching the edge */ @media (max-width:560px){ .hero{padding-top:6.2rem} .hero h1{overflow-wrap:anywhere} .stat-n{font-size:clamp(1.7rem,7vw,2.2rem)} } /* ============================================================================ v3 — stable typewriter, partners marquee, reviews platforms ========================================================================== */ /* ---- typewriter: reserved block so the page never shifts ---- */ .hero h1 .type-line-wrap{display:block;position:relative;min-height:1.15em} .type-line-wrap .type-line{display:inline} .type-caret{display:inline-block;width:.055em;min-width:2px;height:.92em;background:currentColor;color:var(--aurox); margin-left:.05em;vertical-align:-.06em;border-radius:2px;animation:caret 1s step-end infinite} @keyframes caret{50%{opacity:0}} @media (prefers-reduced-motion:reduce){.type-caret{display:none}} /* ---- partners marquee ---- */ .partners{padding-block:clamp(2.6rem,5vw,3.8rem);border-top:1px solid var(--line);background:var(--paper);overflow:hidden} .partners-head{text-align:center;margin-bottom:1.9rem} .partners-head .eyebrow{margin-bottom:.4rem} .partners-head p{color:var(--slate);font-size:.95rem;margin:0 auto;max-width:56ch} .partners-mask{position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);display:grid;gap:1.4rem} .partners-row{display:flex;align-items:center;gap:clamp(2rem,4vw,3.2rem);width:max-content;animation:scrollx 42s linear infinite} .partners-row--rev{animation-direction:reverse;animation-duration:52s} .partners:hover .partners-row{animation-play-state:paused} .partner{display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;font-family:var(--f-display); font-weight:700;font-size:clamp(1rem,1.5vw,1.22rem);letter-spacing:-.01em;color:var(--slate-2);opacity:.72; transition:color .2s var(--ease),opacity .2s var(--ease)} .partner:hover{color:var(--ink);opacity:1} .partner svg{width:1.15em;height:1.15em;color:var(--aurox);opacity:.85} @media (prefers-reduced-motion:reduce){.partners-row{animation:none;flex-wrap:wrap;justify-content:center;width:auto} .partners-row--dup{display:none}} /* ---- reviews platforms grid (home "see all" + /reviews/ page) ---- */ .plat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.2rem)} .plat{display:flex;align-items:center;gap:.9rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:1.1rem 1.2rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .plat:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--halo-2)} .plat .pl-badge{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;color:#fff; font-family:var(--f-display);font-weight:800;font-size:1.05rem} .plat .pl-n{font-weight:600;color:var(--ink);font-size:.94rem} .plat .pl-s{font-size:.8rem;color:var(--slate);display:flex;align-items:center;gap:.4em} .plat .pl-go{margin-left:auto;flex:none;color:var(--aurox);font-weight:600;font-size:.82rem;display:inline-flex;align-items:center;gap:.25em} .plat .pl-go svg{width:15px;height:15px} .plat.soon{opacity:.72} .plat.soon .pl-go{color:var(--slate-2)} .plat-note{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-2); border:1px solid var(--line);border-radius:4px;padding:.05em .4em} @media (max-width:900px){.plat-grid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.plat-grid{grid-template-columns:1fr}} .prm-dup{display:contents} @media (prefers-reduced-motion:reduce){.prm-dup{display:none}} /* ---- active nav state ---- */ .nav-link.is-active{color:var(--aurox);background:var(--sky-soft);font-weight:600} .nav-link.is-active .chev{opacity:1} .mega-link.is-active{background:var(--mist)} .mega-link.is-active .mega-tt{color:var(--aurox)} .drawer-links a.is-active{color:var(--aurox);font-weight:600} .drawer-links a.is-active::after{content:"";width:.42em;height:.42em;border-radius:50%;background:var(--aurox);margin-left:.15rem} /* ============================================================================ PWA install prompt (restored) ========================================================================== */ .pwa-install{position:fixed;left:50%;bottom:1.1rem;transform:translateX(-50%) translateY(140%); z-index:1200;display:flex;align-items:center;gap:.9rem;width:min(420px,calc(100vw - 1.6rem)); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg); padding:.85rem 1rem;opacity:0;transition:transform .5s var(--ease-out),opacity .4s var(--ease)} .pwa-install.show{transform:translateX(-50%) translateY(0);opacity:1} .pwa-install .pwa-ic{width:44px;height:44px;flex:none;border-radius:12px;overflow:hidden;box-shadow:var(--sh-sm)} .pwa-install .pwa-ic img{width:100%;height:100%} .pwa-install .pwa-tx{display:flex;flex-direction:column;line-height:1.3;min-width:0} .pwa-install .pwa-tx strong{font-family:var(--f-display);font-size:.95rem;color:var(--ink)} .pwa-install .pwa-tx span{font-size:.8rem;color:var(--slate)} .pwa-install .pwa-btn{margin-left:auto;flex:none;background:var(--aurox);color:#fff;font-weight:600; border-radius:var(--r-sm);padding:.55em 1em;font-size:.88rem;box-shadow:var(--sh-blue);transition:background .2s,transform .15s} .pwa-install .pwa-btn:hover{background:var(--aurox-600);transform:translateY(-1px)} .pwa-install .pwa-x{flex:none;width:28px;height:28px;border-radius:50%;color:var(--slate-2);font-size:1.1rem;line-height:1; display:grid;place-items:center;transition:background .15s,color .15s} .pwa-install .pwa-x:hover{background:var(--mist);color:var(--ink)} @media (max-width:480px){.pwa-install{gap:.7rem;padding:.75rem .8rem}.pwa-install .pwa-tx span{display:none}} @media (prefers-reduced-motion:reduce){.pwa-install{transition:opacity .2s}} /* ============================================================================ DARK MODE — token flip. Applied via . Follows the system preference by default; the toggle overrides and persists. ========================================================================== */ html[data-theme="dark"]{ --paper:#070d1c; --surface:#0e1730; --mist:#0a1226; --frost:#111c39; --halo:#16234a; --halo-2:#1d2c58; --ink:#eaf1ff; --ink-soft:#c6d3ee; --slate:#94a5c8; --slate-2:#7385ab; --line:#1e2b4f; --line-2:#182444; --aurox:#5b8bff; --aurox-600:#7aa2ff; --aurox-700:#9cbaff; --sky:#7fa8ff; --sky-soft:#15224a; --sh-xs:0 1px 2px rgba(0,0,0,.4); --sh-sm:0 2px 10px -2px rgba(0,0,0,.55); --sh:0 12px 34px -14px rgba(0,0,0,.7); --sh-lg:0 34px 80px -26px rgba(0,0,0,.85); --sh-blue:0 18px 40px -18px rgba(91,139,255,.45); color-scheme:dark; } html[data-theme="dark"] body{background:var(--paper)} html[data-theme="dark"] .nav-shell{background:rgba(10,18,38,.72)} html[data-theme="dark"] .nav.scrolled .nav-shell{background:rgba(10,18,38,.92)} html[data-theme="dark"] .drawer,html[data-theme="dark"] .mega,html[data-theme="dark"] .cmdk{background:var(--surface)} html[data-theme="dark"] .hero-bg .blueprint{opacity:.28} html[data-theme="dark"] html[data-theme="dark"] html[data-theme="dark"] html[data-theme="dark"] html[data-theme="dark"] html[data-theme="dark"] .stats,html[data-theme="dark"] .loc-grid{background:var(--line)} html[data-theme="dark"] .btn-white{--bg:var(--surface);--fg:var(--aurox)} html[data-theme="dark"] .quote-stars{color:#f7b731} html[data-theme="dark"] .plan--feat{background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(140deg,var(--aurox),var(--sky)) border-box} html[data-theme="dark"] .pwa-install{background:var(--surface)} html[data-theme="dark"] .rating-summary,html[data-theme="dark"] .rev-plat,html[data-theme="dark"] .plat{background:var(--surface)} html[data-theme="dark"] .partner{color:var(--slate)} html[data-theme="dark"] .partner:hover{color:var(--ink)} html[data-theme="dark"] .cmp thead th{background:var(--mist)} html[data-theme="dark"] .alert-info{background:var(--frost)} /* footer + dark panels already dark: keep them, just deepen slightly */ html[data-theme="dark"] .footer{background:#050a17} /* theme toggle button */ .theme-btn{display:inline-grid;place-items:center;width:38px;height:38px;flex:none; border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink-soft); transition:color .18s,border-color .18s,background .18s} .theme-btn:hover{color:var(--aurox);border-color:var(--aurox);background:var(--sky-soft)} .theme-btn svg{width:18px;height:18px} .theme-btn .ico-sun{display:none} html[data-theme="dark"] .theme-btn .ico-sun{display:block} html[data-theme="dark"] .theme-btn .ico-moon{display:none} @media (max-width:840px){.nav-cta .theme-btn{display:none}} .drawer-theme{display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.95rem .2rem;border-bottom:1px solid var(--line);font-family:var(--f-display);font-weight:600;color:var(--ink)} /* 22. 3D MOTION SYSTEM ===================================================== */ /* Depth is the new axis: pointer-tilt cards, perspective reveals, ambient wireframe objects. Everything transform/opacity only — CWV-safe — and fully disabled under prefers-reduced-motion. */ .readbar{position:fixed;top:0;left:0;height:3px;width:100%;z-index:1001;pointer-events:none; background:linear-gradient(90deg,var(--aurox),var(--sky));transform:scaleX(0);transform-origin:left; transition:transform .08s linear} /* pointer-tilt (JS drives inline transform + --mx/--my for glare) */ .has-glare::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0; background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(27,77,228,.10),transparent 62%); transition:opacity .3s var(--ease)} .has-glare:hover::after{opacity:1} /* extended reveal variants (base [data-reveal] already defined in §20) */ [data-reveal="3d"]{transform:perspective(900px) rotateX(16deg) translateY(36px);transform-origin:50% 100%} [data-reveal="left"]{transform:translateX(-40px)} [data-reveal="right"]{transform:translateX(40px)} [data-reveal="zoom"]{transform:scale(.92) translateY(18px)} [data-reveal].in{transform:none} /* ambient float + scroll parallax hooks */ @keyframes fx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} .fx-float{animation:fx-bob 7s var(--ease) infinite} [data-parallax]{will-change:transform} /* — hero object: shared stage — */ .obj-stage{position:relative;z-index:1;width:min(380px,80vw);aspect-ratio:1;margin-inline:auto; display:grid;place-items:center;perspective:1100px} .obj-ring{position:absolute;border-radius:50%;border:1.5px dashed var(--halo-2);opacity:.8;pointer-events:none} .obj-ring.r1{inset:6%}.obj-ring.r2{inset:-4%;border-style:solid;border-color:var(--line);opacity:.6} @keyframes ring-spin{to{transform:rotate(360deg)}} .obj-ring.r1{animation:ring-spin 40s linear infinite} .obj-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--aurox);box-shadow:0 0 0 5px var(--sky-soft)} .obj-dot.d1{top:9%;left:52%}.obj-dot.d2{bottom:14%;left:12%;background:var(--up);box-shadow:0 0 0 5px rgba(18,184,134,.14)} /* — journal stack (blog hero): three floating planes — */ .o-stack{position:relative;width:250px;height:250px;transform-style:preserve-3d; transform:rotateX(56deg) rotateZ(-42deg);animation:stack-drift 10s var(--ease) infinite} @keyframes stack-drift{0%,100%{transform:rotateX(56deg) rotateZ(-42deg) translateZ(0)} 50%{transform:rotateX(56deg) rotateZ(-36deg) translateZ(14px)}} .o-plane{position:absolute;inset:0;border-radius:16px;border:1.5px solid rgba(27,77,228,.38); background:linear-gradient(135deg,rgba(27,77,228,.07),rgba(79,134,255,.02)); box-shadow:0 24px 40px -28px rgba(12,42,120,.35);transform-style:preserve-3d} .o-plane.p1{transform:translateZ(-46px);opacity:.55} .o-plane.p2{transform:translateZ(0)} .o-plane.p3{transform:translateZ(46px);background:linear-gradient(135deg,rgba(27,77,228,.12),rgba(79,134,255,.04))} .o-plane.p3::before{content:"";position:absolute;inset:22px;border-radius:8px; background:repeating-linear-gradient(180deg,rgba(27,77,228,.34) 0 3px,transparent 3px 16px);opacity:.8} .o-plane.p3::after{content:"";position:absolute;left:22px;top:22px;width:44%;height:10px;border-radius:4px;background:var(--aurox)} .o-plane.p2::before{content:"";position:absolute;right:16px;bottom:14px;font-family:var(--f-mono);font-size:.66rem; letter-spacing:.14em;color:var(--aurox);content:"JOURNAL/26"} /* — answer cube (FAQ hero) — */ .o-cube{position:relative;width:180px;height:180px;transform-style:preserve-3d; animation:cube-spin 26s linear infinite} @keyframes cube-spin{from{transform:rotateX(-16deg) rotateY(0)}to{transform:rotateX(-16deg) rotateY(360deg)}} .o-cube .face{position:absolute;inset:0;display:grid;place-items:center;border-radius:14px; border:1.5px solid rgba(27,77,228,.42);background:rgba(27,77,228,.05); font-family:var(--f-mono);font-size:2.5rem;font-weight:500;color:var(--aurox)} .o-cube .f1{transform:translateZ(90px)} .o-cube .f2{transform:rotateY(180deg) translateZ(90px)} .o-cube .f3{transform:rotateY(90deg) translateZ(90px)} .o-cube .f4{transform:rotateY(-90deg) translateZ(90px)} .o-cube .f5{transform:rotateX(90deg) translateZ(90px);background:rgba(27,77,228,.09)} .o-cube .f6{transform:rotateX(-90deg) translateZ(90px);background:rgba(27,77,228,.02)} /* — growth tower (achievements hero): 2.5-D isometric bars — */ .o-tower{display:flex;align-items:flex-end;gap:14px;padding-left:12px} .o-bar{position:relative;width:34px;background:linear-gradient(180deg,#3563f0,var(--aurox-600)); transform-origin:bottom;animation:bar-rise .9s var(--ease-out) both} .o-bar::before{content:"";position:absolute;bottom:100%;left:0;width:100%;height:12px; background:#7ba0ff;transform:skewX(-45deg);transform-origin:0 100%} .o-bar::after{content:"";position:absolute;top:0;left:100%;width:12px;height:100%; background:var(--aurox-700);transform:skewY(-45deg);transform-origin:0 0} .o-bar b{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%); font-family:var(--f-mono);font-weight:500;font-size:.62rem;letter-spacing:.06em;color:var(--slate-2)} @keyframes bar-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}} .o-bar:nth-child(1){height:34px;animation-delay:.05s}.o-bar:nth-child(2){height:54px;animation-delay:.15s} .o-bar:nth-child(3){height:72px;animation-delay:.25s}.o-bar:nth-child(4){height:94px;animation-delay:.35s} .o-bar:nth-child(5){height:118px;animation-delay:.45s}.o-bar:nth-child(6){height:144px;animation-delay:.55s} .o-bar:nth-child(7){height:172px;animation-delay:.65s;background:linear-gradient(180deg,#57e6b0,var(--up))} .o-bar:nth-child(7)::before{background:#9ff0cf}.o-bar:nth-child(7)::after{background:#0d9469} /* split hero layout used by the three new pages */ .phero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:3rem;align-items:center} /* 23. JOURNAL / BLOG ======================================================= */ .blog-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:1.9rem} .blog-search{display:flex;align-items:center;gap:.6rem;flex:1;min-width:230px;max-width:400px; background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-pill);padding:.62rem 1.05rem; transition:border-color .2s,box-shadow .2s} .blog-search:focus-within{border-color:var(--aurox);box-shadow:0 0 0 4px var(--sky-soft)} .blog-search svg{width:17px;height:17px;color:var(--slate-2);flex:none} .blog-search input{border:none;outline:none;background:none;width:100%;font-size:.94rem;color:var(--ink)} .blog-search input::placeholder{color:var(--slate-2)} .chips{display:flex;flex-wrap:wrap;gap:.5rem} .chip{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;padding:.5rem .95rem;border-radius:var(--r-pill); border:1.5px solid var(--line);color:var(--slate);background:var(--surface);cursor:pointer; transition:color .2s,border-color .2s,background .2s,transform .2s var(--ease)} .chip:hover{border-color:var(--halo-2);color:var(--ink);transform:translateY(-1px)} .chip.on{background:var(--aurox);border-color:var(--aurox);color:#fff} .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)} .post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);overflow:hidden;position:relative; transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .post-card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--halo-2)} .post-card:focus-within{border-color:var(--aurox)} .post-body{display:flex;flex-direction:column;gap:.65rem;padding:1.25rem 1.35rem 1.45rem;flex:1} .post-kicker{display:flex;align-items:center;gap:.7rem;font-family:var(--f-mono);font-size:.7rem; letter-spacing:.13em;text-transform:uppercase;color:var(--aurox)} .post-kicker .dot-sep{width:3px;height:3px;border-radius:50%;background:var(--slate-2)} .post-kicker time,.post-kicker .rt{color:var(--slate-2);letter-spacing:.08em;text-transform:none} .post-card h3{font-size:1.14rem;line-height:1.32} .post-card h3 a{color:var(--ink)} .post-card h3 a::after{content:"";position:absolute;inset:0} .post-card h3 a:hover{color:var(--aurox)} .post-desc{font-size:.92rem;color:var(--slate);line-height:1.62;flex:1} .post-more{font-size:.88rem;font-weight:600;color:var(--aurox);display:inline-flex;align-items:center;gap:.35rem} .post-card:hover .post-more .arw{transform:translateX(3px)} .post-more .arw{transition:transform .25s var(--ease)} /* generated art tiles — no image assets needed */ .post-art{position:relative;height:158px;overflow:hidden;border-bottom:1px solid var(--line); display:grid;place-items:center;background:var(--frost)} .post-art::before{content:"";position:absolute;inset:0; background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px); background-size:26px 26px} .post-art .glyph{position:relative;font-family:var(--f-mono);font-size:2rem;color:var(--aurox); width:74px;height:74px;display:grid;place-items:center;border-radius:18px;background:var(--surface); border:1.5px solid rgba(27,77,228,.35);box-shadow:var(--sh-sm); transition:transform .4s var(--ease)} .post-card:hover .post-art .glyph{transform:translateY(-4px) rotate(-4deg) scale(1.05)} .post-art.art-privacy::after,.post-art.art-performance::after,.post-art.art-guides::after,.post-art.art-news::after{ content:"";position:absolute;inset:auto -20% -55% -20%;height:110%;border-radius:50%; background:radial-gradient(ellipse at 50% 100%,rgba(27,77,228,.16),transparent 70%)} .post-art.art-performance .glyph{color:var(--sky)} .post-art.art-performance::after{background:radial-gradient(ellipse at 50% 100%,rgba(79,134,255,.2),transparent 70%)} .post-art.art-guides .glyph{color:var(--up);border-color:rgba(18,184,134,.4)} .post-art.art-guides::after{background:radial-gradient(ellipse at 50% 100%,rgba(18,184,134,.16),transparent 70%)} .post-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* featured post */ .post-feat{display:grid;grid-template-columns:1.05fr 1fr;border:1px solid var(--line);border-radius:var(--r-xl); overflow:hidden;background:var(--surface);position:relative;box-shadow:var(--sh-sm); transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .post-feat:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--halo-2)} .post-feat .post-art{height:100%;min-height:280px;border-bottom:none;border-right:1px solid var(--line)} .post-feat .post-art .glyph{width:104px;height:104px;font-size:2.8rem;border-radius:26px} .post-feat .post-body{padding:clamp(1.6rem,3.4vw,2.6rem);gap:.9rem;justify-content:center} .post-feat h2{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.18} .post-feat h2 a{color:var(--ink)} .post-feat h2 a::after{content:"";position:absolute;inset:0} .post-feat h2 a:hover{color:var(--aurox)} .post-feat .post-desc{font-size:1rem;flex:0 1 auto} .feat-flag{position:absolute;top:1.1rem;right:1.1rem;z-index:2;font-family:var(--f-mono);font-size:.66rem; letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--aurox); padding:.34rem .7rem;border-radius:var(--r-pill)} .grid-empty{grid-column:1/-1;text-align:center;padding:3rem 1rem;color:var(--slate); border:1.5px dashed var(--line);border-radius:var(--r-lg)} .grid-empty b{display:block;color:var(--ink);font-family:var(--f-display);font-size:1.05rem;margin-bottom:.35rem} /* 24. ARTICLE ============================================================== */ .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-family:var(--f-mono);font-size:.74rem; letter-spacing:.05em;color:var(--slate-2);margin-bottom:1.4rem} .crumbs a{color:var(--slate);transition:color .2s} .crumbs a:hover{color:var(--aurox)} .crumbs svg{width:12px;height:12px;opacity:.6} .art-head{max-width:820px} .art-head h1{font-size:clamp(1.9rem,4.4vw,3rem);letter-spacing:-.028em;line-height:1.08;margin:.4rem 0 1.1rem} .art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;font-family:var(--f-mono);font-size:.78rem;color:var(--slate)} .art-meta .avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--aurox),var(--sky)); color:#fff;display:grid;place-items:center;font-weight:600;font-size:.8rem;font-family:var(--f-sans)} .art-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--slate-2)} .art-layout{display:grid;grid-template-columns:minmax(0,760px) 230px;gap:clamp(2.4rem,5vw,4.5rem);justify-content:center} .toc{position:sticky;top:104px;align-self:start;font-size:.86rem} .toc-t{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-2);margin-bottom:.8rem} .toc ol{display:grid;gap:.15rem;border-left:1.5px solid var(--line)} .toc a{display:block;padding:.34rem 0 .34rem .95rem;color:var(--slate);border-left:1.5px solid transparent; margin-left:-1.5px;line-height:1.4;transition:color .2s,border-color .2s} .toc a:hover{color:var(--ink)} .toc a.on{color:var(--aurox);border-left-color:var(--aurox);font-weight:500} .art-body{min-width:0} .art-body h2{scroll-margin-top:104px} .art-body h3{scroll-margin-top:104px} .art-body .lead-in{font-size:clamp(1.08rem,1.6vw,1.24rem);line-height:1.62;color:var(--ink-soft); font-weight:500;margin-bottom:1.6rem} .art-body figure{margin:1.8rem 0} .art-body figcaption{font-family:var(--f-mono);font-size:.74rem;color:var(--slate-2);margin-top:.6rem} .art-body table{width:100%;border-collapse:collapse;font-size:.92rem;margin:1.4rem 0} .art-body th{font-family:var(--f-display);font-weight:600;font-size:.86rem;text-align:left;color:var(--ink); background:var(--mist);padding:.7rem .85rem;border:1px solid var(--line)} .art-body td{padding:.65rem .85rem;border:1px solid var(--line);color:var(--ink-soft)} .art-body td.good{color:var(--up);font-weight:600} .art-body code{font-family:var(--f-mono);font-size:.86em;background:var(--frost);border:1px solid var(--line); border-radius:6px;padding:.12em .4em;color:var(--aurox-700)} .art-body pre{background:var(--navy);color:var(--navy-ink);border-radius:var(--r);padding:1.1rem 1.25rem; overflow-x:auto;margin:1.4rem 0;font-family:var(--f-mono);font-size:.86rem;line-height:1.65;box-shadow:var(--sh-sm)} .art-body pre code{background:none;border:none;padding:0;color:inherit} .callout{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;margin:1.6rem 0; background:var(--frost);border:1px solid var(--halo);border-left:3px solid var(--aurox); border-radius:var(--r);padding:1.05rem 1.2rem} .callout svg{width:20px;height:20px;color:var(--aurox);margin-top:.15rem} .callout p{font-size:.93rem;margin:0;color:var(--ink-soft)} .callout.ok{border-left-color:var(--up);background:rgba(18,184,134,.06);border-color:rgba(18,184,134,.22)} .callout.ok svg{color:var(--up)} .art-share{display:flex;align-items:center;gap:.6rem;margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line)} .art-share span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-2);margin-right:.3rem} .share-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center; color:var(--slate);transition:color .2s,border-color .2s,background .2s,transform .2s var(--ease)} .share-btn:hover{color:var(--aurox);border-color:var(--aurox);background:var(--sky-soft);transform:translateY(-2px)} .share-btn svg{width:16px;height:16px} .author-card{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:center;margin-top:1.8rem; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.25rem 1.4rem} .author-card .avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--aurox),var(--sky)); color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.05rem;font-family:var(--f-display)} .author-card b{display:block;font-family:var(--f-display);color:var(--ink)} .author-card p{font-size:.88rem;color:var(--slate);margin:0} .post-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem} .post-nav a{display:flex;flex-direction:column;gap:.3rem;background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:1rem 1.15rem;transition:border-color .2s,box-shadow .3s var(--ease),transform .3s var(--ease)} .post-nav a:hover{border-color:var(--halo-2);box-shadow:var(--sh-sm);transform:translateY(-2px)} .post-nav .lbl{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2)} .post-nav .ttl{font-family:var(--f-display);font-weight:600;font-size:.95rem;color:var(--ink);line-height:1.35} .post-nav a.next{text-align:right;align-items:flex-end} .post-nav a.empty{visibility:hidden} /* 25. FAQ PAGE ============================================================= */ .faq-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.9rem} .faq-hero-search{max-width:460px} .faq-group{max-width:820px;margin-inline:auto} .faq-group + .faq-group{margin-top:2.8rem} .faq-group-h{display:flex;align-items:baseline;gap:.8rem;margin-bottom:.4rem} .faq-group-h h2{font-size:clamp(1.2rem,2vw,1.5rem)} .faq-group-h .cnt{font-family:var(--f-mono);font-size:.72rem;color:var(--slate-2);letter-spacing:.08em} .faq mark{background:rgba(245,159,0,.28);color:inherit;border-radius:3px;padding:0 .1em} .faq details.hl summary{color:var(--aurox)} .faq-empty{display:none;text-align:center;padding:2.6rem 1rem;color:var(--slate); border:1.5px dashed var(--line);border-radius:var(--r-lg);max-width:820px;margin-inline:auto} .faq-empty.show{display:block} .faq-empty b{display:block;color:var(--ink);font-family:var(--f-display);margin-bottom:.3rem} .faq-foot{max-width:820px;margin:2.2rem auto 0;text-align:center;font-size:.92rem;color:var(--slate)} .faq-foot a{color:var(--aurox);font-weight:600;border-bottom:1px solid var(--halo-2)} /* 26. ACHIEVEMENTS ========================================================= */ .tl{position:relative;max-width:900px;margin-inline:auto;padding:1rem 0} .tl::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%); background:linear-gradient(180deg,transparent,var(--halo-2) 6%,var(--halo-2) 94%,transparent)} .tl-item{position:relative;width:calc(50% - 2.6rem);margin-bottom:2.2rem} .tl-item:nth-child(odd){margin-right:auto;text-align:right} .tl-item:nth-child(even){margin-left:auto} .tl-node{position:absolute;top:1.2rem;width:15px;height:15px;border-radius:50%;background:var(--surface); border:3px solid var(--aurox);box-shadow:0 0 0 5px var(--sky-soft)} .tl-item:nth-child(odd) .tl-node{right:-2.6rem;transform:translateX(50%)} .tl-item:nth-child(even) .tl-node{left:-2.6rem;transform:translateX(-50%)} .tl-card{display:inline-block;text-align:left;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);padding:1.3rem 1.45rem;box-shadow:var(--sh-xs);position:relative; transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .tl-card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--halo-2)} .tl-year{font-family:var(--f-mono);font-weight:500;font-size:.74rem;letter-spacing:.18em;color:var(--aurox); display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.55rem} .tl-year::before{content:"";width:1.3rem;height:1px;background:var(--aurox)} .tl-card h3{font-size:1.08rem;margin-bottom:.4rem} .tl-card p{font-size:.9rem;color:var(--slate);line-height:1.6;margin:0} .tl-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem} .tl-tag{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;color:var(--aurox-700); background:var(--sky-soft);border-radius:var(--r-pill);padding:.24rem .6rem} .tl-item.now .tl-node{border-color:var(--up);box-shadow:0 0 0 5px rgba(18,184,134,.15)} .tl-item.now .tl-year{color:var(--up)} .tl-item.now .tl-year::before{background:var(--up)} .ach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)} .ach-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(1.3rem,2.4vw,1.7rem);position:relative; transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .ach-card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--halo-2)} .ach-n{font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.6rem); letter-spacing:-.03em;color:var(--ink);line-height:1;display:flex;align-items:baseline;gap:.1em} .ach-n .u{color:var(--aurox);font-size:.62em;font-weight:700} .ach-l{font-family:var(--f-display);font-weight:600;font-size:.98rem;color:var(--ink);margin-top:.55rem} .ach-s{font-size:.86rem;color:var(--slate);margin-top:.25rem;line-height:1.55} /* 27. THEME + RESPONSIVE FOR §22–26 ======================================== */ html[data-theme="dark"] .has-glare::after{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(140,175,255,.10),transparent 62%)} html[data-theme="dark"] .o-plane{border-color:rgba(120,160,240,.4);background:linear-gradient(135deg,rgba(79,134,255,.10),rgba(79,134,255,.02));box-shadow:0 24px 40px -26px rgba(0,0,0,.6)} html[data-theme="dark"] .o-cube .face{border-color:rgba(120,160,240,.42);background:rgba(79,134,255,.06);color:var(--sky)} html[data-theme="dark"] .o-cube .f5{background:rgba(79,134,255,.12)} html[data-theme="dark"] .post-art{background:var(--frost)} html[data-theme="dark"] .post-art .glyph{background:var(--surface)} html[data-theme="dark"] .art-body pre{background:#03080f;box-shadow:none;border:1px solid var(--navy-line)} html[data-theme="dark"] .art-body th{background:var(--frost)} html[data-theme="dark"] .callout{background:rgba(79,134,255,.07);border-color:rgba(120,160,240,.22)} html[data-theme="dark"] .faq mark{background:rgba(245,159,0,.4)} html[data-theme="dark"] .obj-ring.r1{border-color:rgba(120,160,240,.35)} html[data-theme="dark"] .obj-dot.d1{box-shadow:0 0 0 5px rgba(79,134,255,.15)} @media (max-width:1024px){ .art-layout{grid-template-columns:minmax(0,760px)} .toc{display:none} .phero-split{grid-template-columns:1fr;gap:2.2rem} .phero-split .obj-stage{width:min(300px,72vw);order:-1} .post-grid{grid-template-columns:1fr 1fr} .ach-grid{grid-template-columns:1fr 1fr} } @media (max-width:720px){ .post-grid{grid-template-columns:1fr} .post-feat{grid-template-columns:1fr} .post-feat .post-art{min-height:190px;border-right:none;border-bottom:1px solid var(--line)} .ach-grid{grid-template-columns:1fr} .post-nav{grid-template-columns:1fr} .post-nav a.next{text-align:left;align-items:flex-start} .tl::before{left:9px} .tl-item{width:auto;margin-left:2.4rem !important;margin-right:0 !important;text-align:left !important} .tl-item .tl-node{left:-2.4rem !important;right:auto !important;transform:translateX(-40%) !important} .obj-stage{width:min(280px,78vw)} .o-stack{width:200px;height:200px} .o-cube{width:150px;height:150px} .o-cube .face{font-size:2.1rem} .o-cube .f1,.o-cube .f2,.o-cube .f3,.o-cube .f4{transform:none} .o-cube .f1{transform:translateZ(75px)}.o-cube .f2{transform:rotateY(180deg) translateZ(75px)} .o-cube .f3{transform:rotateY(90deg) translateZ(75px)}.o-cube .f4{transform:rotateY(-90deg) translateZ(75px)} .o-cube .f5{transform:rotateX(90deg) translateZ(75px)}.o-cube .f6{transform:rotateX(-90deg) translateZ(75px)} } @media (prefers-reduced-motion:reduce){ .o-stack,.o-cube,.o-bar,.obj-ring.r1,.fx-float{animation:none !important} .readbar{transition:none} } .faq details{scroll-margin-top:104px} .faq summary .q-txt{flex:1} /* ── 28. JS-hook + prev affordance (v4 close-out) ─────────────────────── */ .fx-mag{will-change:transform} .post-nav a.prev .ttl,.post-nav a.next .ttl{transition:color .18s ease} .post-nav a.prev:hover .ttl,.post-nav a.next:hover .ttl{color:var(--aurox)} /* ══ 29. FOOTER v2 — organized 5-column layout ═══════════════════════════ */ .footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--aurox),#22d3ee 55%,var(--up));opacity:.9} .foot-top{grid-template-columns:1.7fr .9fr .95fr .9fr 1.2fr} .foot-links a{transition:color .16s ease,transform .16s ease;will-change:transform} .foot-links a:hover{transform:translateX(3px)} .foot-bottom{justify-content:space-between;align-items:center;gap:1rem 2rem} .foot-bottom .foot-legal{margin-inline:auto} @media(max-width:1024px){ .foot-top{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1} } @media(max-width:560px){ .foot-top{grid-template-columns:1fr 1fr} .foot-bottom{flex-direction:column;align-items:flex-start} .foot-bottom .foot-legal{margin-inline:0} } /* ══ 30. DOMAINS PAGE ════════════════════════════════════════════════════ */ /* hero mini price cards */ .tld-hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1.9rem;max-width:480px} .tld-mini{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:.75rem .85rem;display:flex;flex-direction:column;gap:.15rem;position:relative; box-shadow:var(--sh-xs);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .tld-mini:hover{transform:translateY(-3px);border-color:var(--halo-2);box-shadow:var(--sh-sm)} .tld-mini .t{font-family:var(--f-mono);font-weight:500;font-size:.92rem;color:var(--ink)} .tld-mini .p{font-family:var(--f-display);font-weight:700;font-size:.86rem;color:var(--aurox)} .tld-mini .l{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2)} /* toolbar */ .tld-toolbar{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;justify-content:space-between;margin-top:2.2rem} .tld-toolbar .blog-search{max-width:340px} .dcur{display:inline-flex;background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:.22rem;gap:.15rem;flex:none} .dcur button{border:none;background:none;font:inherit;font-weight:600;font-size:.82rem;color:var(--slate); padding:.38rem .95rem;border-radius:999px;cursor:pointer;transition:all .15s ease} .dcur button.on{background:var(--aurox);color:#fff;box-shadow:0 2px 8px rgba(27,77,228,.35)} /* scroll wrapper + table */ .tbl-scroll{margin-top:1.4rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface); box-shadow:var(--sh-sm);overflow-x:auto;-webkit-overflow-scrolling:touch} .tld-table{width:100%;border-collapse:collapse;min-width:560px;font-size:.92rem} .tld-table thead th{position:sticky;top:0;background:var(--mist);font-family:var(--f-mono);font-weight:500; font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-2); text-align:left;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);white-space:nowrap;z-index:2} .tld-table thead th:not(:first-child),.tld-table td:not(:first-child){text-align:right} .tld-table td{padding:.78rem 1.1rem;border-bottom:1px solid var(--line);white-space:nowrap;color:var(--slate)} .tld-table tbody tr:last-child td{border-bottom:none} .tld-table tbody tr{transition:background .12s ease} .tld-table tbody tr:hover{background:var(--sky-soft)} .tld-table .tld{font-family:var(--f-mono);font-weight:500;color:var(--ink);display:flex;align-items:center;gap:.5rem} .tld-table .money{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600} .tld-table td:nth-child(3) .money,.tld-table td:nth-child(4) .money{font-weight:400;color:var(--slate)} .tld-flag{font-family:var(--f-sans);font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; padding:.14rem .45rem;border-radius:999px;line-height:1.4} .tld-flag.sale{background:#e7f8f0;color:#0d9469} .tld-flag.hot{background:#feefe8;color:#d9480f} .tld-flag.new{background:var(--sky-soft);color:var(--aurox)} .tld-count{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.08em;color:var(--slate-2);margin-top:1rem} .tld-empty{display:none;text-align:center;padding:2.6rem 1rem;color:var(--slate)} .tld-empty.show{display:block} .tld-note{margin-top:1.2rem;font-size:.84rem;color:var(--slate-2);line-height:1.6} .tld-note a{color:var(--aurox);font-weight:600} /* dark theme */ html[data-theme="dark"] .tld-mini{background:var(--surface);border-color:var(--line)} html[data-theme="dark"] .dcur{background:#0d1526} html[data-theme="dark"] .tbl-scroll{background:var(--surface)} html[data-theme="dark"] .tld-table thead th{background:#0d1526} html[data-theme="dark"] .tld-table tbody tr:hover{background:rgba(59,130,246,.08)} html[data-theme="dark"] .tld-flag.sale{background:rgba(18,184,134,.14)} html[data-theme="dark"] .tld-flag.hot{background:rgba(217,72,15,.16);color:#ff8a5c} @media(max-width:720px){ .tld-hero-grid{grid-template-columns:repeat(2,1fr);max-width:none} .tld-toolbar{flex-direction:column;align-items:stretch} .tld-toolbar .blog-search{max-width:none} .dcur{align-self:flex-start} .tld-table{font-size:.86rem} .tld-table td,.tld-table thead th{padding:.7rem .8rem} } /* ══ 31. MOBILE SAFETY GUARDS ════════════════════════════════════════════ */ .art-body table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch} .art-body pre{overflow-x:auto;max-width:100%} .faq-a{overflow-wrap:break-word} .faq-a a,.prose a{overflow-wrap:anywhere} .obj-stage{max-width:100%} .chips{max-width:100%} img,video{max-width:100%;height:auto} svg{max-width:100%} /* ══ 32. SITE-WIDE DEPTH & POLISH (v5) ═══════════════════════════════════ */ /* 3D perspective on every default reveal — bare data-reveal only, so the named variants (left/right/3d/zoom) and reduced-motion stay untouched */ @media (prefers-reduced-motion:no-preference){ /* ambient drift on hero glows */ .hero-bg .glow{animation:glowdrift 16s ease-in-out infinite alternate} @keyframes glowdrift{ from{transform:translate3d(-2%,-1.5%,0) scale(1)} to{transform:translate3d(2.5%,2%,0) scale(1.07)}} } /* back-to-top */ .top-fab{position:fixed;left:1.1rem;bottom:1.1rem;z-index:900;width:44px;height:44px; border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--slate); display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh-sm); opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .25s ease,transform .25s ease,visibility .25s,color .15s,border-color .15s} .top-fab.show{opacity:1;visibility:visible;transform:none} .top-fab:hover{color:var(--aurox);border-color:var(--halo-2)} .top-fab svg{width:18px;height:18px} html[data-theme="dark"] .top-fab{background:var(--surface);border-color:var(--line)} @media(max-width:560px){.top-fab{width:40px;height:40px;left:.85rem;bottom:.85rem}} /* micro-interactions */ .btn:active{transform:translateY(1px) scale(.99)} ::selection{background:var(--aurox);color:#fff} /* related-article grid (replaces old inline style) */ .grid-2{margin-top:2rem;grid-template-columns:repeat(2,1fr)} /* homepage "all extensions" link under the domain console */ .dc-all{display:inline-flex;align-items:center;gap:.35rem;margin-top:.8rem; font-size:.84rem;font-weight:600;color:var(--aurox);border-bottom:1px solid var(--halo-2)} .dc-all:hover{border-color:var(--aurox)} /* mobile-edge close-out */ html,body{overflow-x:clip} @media(max-width:720px){ .stats{grid-template-columns:repeat(2,1fr)} .grid-2{grid-template-columns:1fr} .phero{overflow:clip} } @media(max-width:420px){ .obj-stage{width:min(300px,86vw)} } /* ══ 33. PREMIUM FOOTER v3 ═══════════════════════════════════════════════ */ .footer{padding-top:clamp(4rem,7vw,6rem)} .foot-main{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(2rem,5vw,4rem); padding-bottom:clamp(2.2rem,4vw,3rem);border-bottom:1px solid var(--navy-line);align-items:start} .foot-news .foot-col-t{margin-bottom:.6rem} .foot-news-sub{font-size:.88rem;line-height:1.6;color:var(--navy-mut);margin-bottom:1.1rem;max-width:38ch} .news-form{display:flex;gap:.6rem;max-width:26rem} .news-form input{flex:1;min-width:0;background:rgba(255,255,255,.04);border:1px solid var(--navy-line); border-radius:var(--r-sm);padding:.72rem .95rem;color:#fff;font:inherit;font-size:.9rem; transition:border-color .18s,background .18s} .news-form input::placeholder{color:#5f739e} .news-form input:focus{outline:none;border-color:var(--aurox);background:rgba(255,255,255,.07)} .news-form .btn{flex:none;white-space:nowrap} .news-msg{margin-top:.7rem;font-size:.82rem;color:var(--sky);display:flex;align-items:center;gap:.4em} .news-msg svg{width:15px;height:15px;flex:none} .foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,2.5rem); padding:clamp(2.2rem,4vw,3rem) 0;border-bottom:1px solid var(--navy-line)} /* payment methods */ .foot-pay-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem 1rem;padding:1.8rem 0; border-bottom:1px solid var(--navy-line)} .foot-pay-label{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; color:#8298c4;margin-right:.3rem} .pay-badges{display:flex;flex-wrap:wrap;gap:.55rem} .pay-badge{display:inline-flex;align-items:center;gap:.4em;background:rgba(255,255,255,.045); border:1px solid var(--navy-line);border-radius:var(--r-sm);padding:.42rem .7rem; font-family:var(--f-sans);font-size:.76rem;font-weight:600;color:#c4d0e8;line-height:1; transition:transform .16s var(--ease),border-color .16s,background .16s} .pay-badge:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07)} .pay-badge svg{width:18px;height:18px;flex:none} .pay-badge .pi{display:grid;place-items:center;width:19px;height:19px;border-radius:4px;font-weight:800; font-size:.7rem;flex:none} .pay-badge.visa .pi{background:#1434cb;color:#fff;font-style:italic;letter-spacing:-.02em} .pay-badge.mc .pi{background:none} .pay-badge.ngn .pi{background:#0d9469;color:#fff} .pay-badge.usd .pi{background:#2f6df0;color:#fff} .pay-badge.btc .pi{background:#f7931a;color:#fff} .pay-badge.usdt .pi{background:#26a17b;color:#fff} .pay-badge.bank .pi{background:rgba(255,255,255,.12);color:#c4d0e8} /* bottom bar */ .foot-bottom{padding:1.6rem 0 2.6rem;gap:1rem 1.6rem} .foot-copy{font-size:.82rem;color:#7488b5} .foot-legal a{color:#8298c4} @media(max-width:900px){ .foot-main{grid-template-columns:1fr} .foot-cols{grid-template-columns:repeat(2,1fr)} } @media(max-width:480px){ .news-form{flex-direction:column} .news-form .btn{width:100%} .foot-bottom{flex-direction:column;align-items:flex-start} } /* ══ 34. HEADER SCROLL-GLASS ═════════════════════════════════════════════ */ .nav-shell{transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)} .nav.scrolled .nav-shell{background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px); box-shadow:0 6px 26px -12px rgba(6,18,43,.28)} html[data-theme="dark"] .nav.scrolled .nav-shell{background:rgba(10,17,32,.9)} @media (prefers-reduced-motion:no-preference){ .nav{transition:transform .4s var(--ease)} } /* ══ 35. SITE-WIDE ANIMATED HERO BACKGROUNDS ═════════════════════════════ */ .hero-bg{--mx:0;--my:0} .hero-bg::before,.hero-bg::after{content:"";position:absolute;border-radius:50%;pointer-events:none; filter:blur(46px);opacity:.55;z-index:0} .hero-bg::before{width:34rem;height:34rem;right:-6rem;top:-10rem; background:radial-gradient(circle at 30% 30%,rgba(59,130,246,.28),rgba(59,130,246,0) 70%)} .hero-bg::after{width:26rem;height:26rem;left:-8rem;bottom:-12rem; background:radial-gradient(circle at 60% 40%,rgba(34,211,238,.2),rgba(124,58,237,.14) 45%,transparent 72%)} html[data-theme="dark"] .hero-bg::before{opacity:.4} html[data-theme="dark"] .hero-bg::after{opacity:.35} @media (prefers-reduced-motion:no-preference){ .hero-bg::before{animation:blobA 22s ease-in-out infinite alternate;will-change:transform} .hero-bg::after{animation:blobB 26s ease-in-out infinite alternate;will-change:transform} @keyframes blobA{ from{transform:translate3d(calc(var(--mx)*-1px),calc(var(--my)*-1px),0) scale(1)} to{transform:translate3d(calc(3rem + var(--mx)*-1px),calc(2rem + var(--my)*-1px),0) scale(1.12)}} @keyframes blobB{ from{transform:translate3d(calc(var(--mx)*1px),calc(var(--my)*1px),0) scale(1.05)} to{transform:translate3d(calc(-2.5rem + var(--mx)*1px),calc(-2rem + var(--my)*1px),0) scale(.92)}} } @media (prefers-reduced-motion:reduce){ .hero-bg::before,.hero-bg::after{opacity:.4} } @media(max-width:560px){ .hero-bg::before{width:20rem;height:20rem;filter:blur(38px)} .hero-bg::after{width:16rem;height:16rem;filter:blur(38px)} } /* ══ 36. NEW MARKETING PAGES (why / infrastructure / migrations) ═════════ */ .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem} .feature-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:1.7rem;box-shadow:var(--sh-xs);position:relative;overflow:hidden; transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)} .feature-card:hover{transform:translateY(-4px);box-shadow:var(--sh-sm);border-color:var(--halo-2)} .feature-card .fi{width:46px;height:46px;border-radius:var(--r);display:grid;place-items:center; background:var(--sky-soft);color:var(--aurox);margin-bottom:1.1rem} .feature-card .fi svg{width:23px;height:23px} .feature-card h3{font-size:1.08rem;margin-bottom:.5rem;font-family:var(--f-display)} .feature-card p{font-size:.92rem;line-height:1.6;color:var(--slate)} .region-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-top:2.4rem} .region-item{display:flex;align-items:center;gap:.85rem;background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:1rem 1.15rem;box-shadow:var(--sh-xs); transition:transform .18s var(--ease),border-color .18s} .region-item:hover{transform:translateY(-3px);border-color:var(--halo-2)} .region-item .flag{font-size:1.5rem;line-height:1;flex:none} .region-item .rc-n{font-family:var(--f-display);font-weight:600;font-size:.96rem;color:var(--ink)} .region-item .rc-s{font-size:.74rem;color:var(--slate-2);font-family:var(--f-mono);letter-spacing:.03em} .step-list{display:grid;gap:1rem;margin-top:2.4rem;counter-reset:step} .step-row{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem 1.6rem; box-shadow:var(--sh-xs)} .step-row .sn{counter-increment:step;width:38px;height:38px;border-radius:50%;flex:none; background:var(--aurox);color:#fff;display:grid;place-items:center;font-family:var(--f-display); font-weight:700;font-size:1.02rem} .step-row .sn::before{content:counter(step)} .step-row h3{font-size:1.05rem;margin-bottom:.35rem;font-family:var(--f-display)} .step-row p{font-size:.92rem;line-height:1.6;color:var(--slate)} @media(max-width:820px){ .feature-grid,.region-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:520px){ .feature-grid,.region-grid{grid-template-columns:1fr} } /* ── 33b. payment wordmark + svg sizing ── */ .pay-badge .wm{font-weight:800;font-style:italic;font-size:.82rem;letter-spacing:-.02em;color:#6b8cff} .pay-badge.mc svg,.pay-badge.bank svg{width:20px;height:16px} .pay-badge.bank svg{color:#c4d0e8} /* ══ 37. FOOTER v4 — brand / contact / newsletter + legal column ═════════ */ .f4-top{display:grid;grid-template-columns:1.35fr 1fr 1.1fr;gap:clamp(2rem,4vw,3.5rem); padding-bottom:clamp(2.2rem,4vw,3rem);border-bottom:1px solid var(--navy-line);align-items:start} .f4-contact .foot-col-t{margin-bottom:.9rem} .f4-ci{display:flex;gap:.65rem;align-items:flex-start;font-size:.9rem;color:var(--navy-mut);margin-bottom:.8rem} .f4-ci svg{width:17px;height:17px;color:var(--sky);flex:none;margin-top:.16em} .f4-ci a{color:var(--navy-mut)} .f4-ci a:hover{color:#fff} /* strip: payments + regions */ .f4-strip{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap; padding:1.6rem 0;border-bottom:1px solid var(--navy-line)} .f4-strip .foot-pay-wrap{padding:0;border:none;flex-wrap:wrap} /* bottom */ @media(max-width:1024px){.f4-top{grid-template-columns:1fr 1fr}.f4-top .foot-news{grid-column:1/-1}} @media(max-width:640px){ .f4-top{grid-template-columns:1fr} .f4-strip{flex-direction:column;align-items:flex-start} } /* chat widget clearance: lift WhatsApp above the aurox-chat launcher */ /* ══ 38. PERFORMANCE — Lenis compat, cheaper effects, offscreen pause ════ */ /* Native smooth-scroll must yield while Lenis drives, or wheel input fights it */ html.lenis, html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto !important} .lenis.lenis-stopped{overflow:hidden} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} /* cheaper ambient blobs: smaller blur radius costs far less GPU per frame */ .hero-bg::before,.hero-bg::after{filter:blur(28px);opacity:.5} html[data-theme="dark"] .hero-bg::before{opacity:.34} html[data-theme="dark"] .hero-bg::after{opacity:.3} /* anything offscreen stops animating (toggled by JS IntersectionObserver) */ .anim-pause,.anim-pause::before,.anim-pause::after,.anim-pause *{animation-play-state:paused !important} /* ══ 39. NET-MAP — animated global data transmission (homepage) ══════════ */ .net-map{margin-top:2.6rem;background:linear-gradient(180deg,var(--surface),var(--mist)); border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm); padding:clamp(.8rem,2vw,1.4rem);position:relative;overflow:hidden} .net-map svg{display:block;width:100%;height:auto} .net-map .lane{fill:none;stroke:var(--line);stroke-width:1.2} .net-map .arc{fill:none;stroke:url(#nmGrad);stroke-width:1.6;stroke-linecap:round; stroke-dasharray:6 10;opacity:.8;animation:nm-dash 2.6s linear infinite} .net-map .arc.a2{animation-duration:3.4s;opacity:.55} .net-map .arc.a3{animation-duration:4.2s;opacity:.4} @keyframes nm-dash{to{stroke-dashoffset:-64}} .net-map .nd{fill:var(--aurox)} .net-map .nd-ring{fill:none;stroke:var(--aurox);stroke-width:1.4;opacity:.5; transform-origin:center;transform-box:fill-box;animation:nm-pulse 2.8s ease-out infinite} @keyframes nm-pulse{0%{transform:scale(.4);opacity:.7}80%,100%{transform:scale(2.1);opacity:0}} .net-map .nl-t{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;fill:var(--slate-2)} .net-map .pkt{fill:var(--sky)} .net-map .pkt.hot{fill:var(--aurox)} html[data-theme="dark"] .net-map{background:linear-gradient(180deg,#0d1526,#0a1120)} html[data-theme="dark"] .net-map .lane{stroke:rgba(148,163,184,.14)} html[data-theme="dark"] .net-map .nl-t{fill:#8298c4} @media (prefers-reduced-motion:reduce){ .net-map .arc{animation:none;stroke-dasharray:none;opacity:.3} .net-map .nd-ring,.net-map .pk{display:none} } @media(max-width:560px){.net-map .nl-t{font-size:13px}} /* ─ 40a. region ticker, dotless ─ */ /* ══ 40. GLOBE TRANSMISSION (hero .noc) — techy, dotless, modern ═════════ */ @keyframes orbitspin{to{transform:rotate(360deg)}} /* label halos: readable over grid lines without moving anything */ .noc-svg html[data-theme="dark"] .noc-svg @media (prefers-reduced-motion:reduce){ .noc-svg } /* ══ 41. PARTNER MARQUEE v2 — real marks in tiles ════════════════════════ */ .partner{gap:.7rem;font-size:clamp(.98rem,1.4vw,1.14rem);font-weight:600;color:var(--slate);opacity:1; padding:.55rem .95rem .55rem .6rem;border:1px solid var(--line);border-radius:var(--r-pill); background:var(--surface);box-shadow:var(--sh-xs); transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease),color .2s} .partner:hover{transform:translateY(-3px);box-shadow:var(--sh-sm);border-color:var(--halo-2);color:var(--ink)} .partner .p-ic{width:34px;height:34px;border-radius:10px;background:var(--mist);display:grid;place-items:center;flex:none} .partner .p-ic svg{width:22px;height:22px;display:block} .partners-row{gap:clamp(.9rem,2vw,1.4rem);animation-duration:56s} .partners-row--rev{animation-duration:66s} html[data-theme="dark"] .partner{background:#0e1729;border-color:rgba(148,163,184,.16)} html[data-theme="dark"] .partner .p-ic{background:#16203a} @media(max-width:560px){.partner{font-size:.92rem;padding:.45rem .8rem .45rem .5rem} .partner .p-ic{width:30px;height:30px}.partner .p-ic svg{width:19px;height:19px}} /* ══ 43. FOOTER v4.1 — tidy strip, mini-legal, calmer seo aside ══════════ */ .f4-strip--pay{justify-content:flex-start;padding:1.7rem 0} .foot-mini{display:flex;gap:1.4rem;flex-wrap:wrap} .foot-mini a{font-size:.82rem;color:#8298c4} .foot-mini a:hover{color:#fff} .foot-seo{padding:1.9rem 0;font-size:.8rem;line-height:1.65;color:#5f739e} .foot-seo h2{font-size:.9rem;color:#a9b8d8;margin-bottom:.55rem} .foot-seo strong{color:#8fa2c9;font-weight:600} .foot-bottom{padding:1.5rem 0 2.4rem;display:flex;justify-content:space-between;align-items:center;gap:.9rem 2rem;flex-wrap:wrap} .foot-copy{font-size:.8rem} @media(max-width:640px){ .foot-bottom{flex-direction:column;align-items:flex-start;gap:.9rem} .foot-cols{row-gap:2rem} .f4-strip--pay .foot-pay-label{width:100%;margin:0 0 .2rem} } /* ══ 45. DRAWER GUARD — nothing floats above the open menu ═══════════════ */ body.drawer-open .top-fab{opacity:0;pointer-events:none} #drawer.open{z-index:1200} /* ══ 46. CANVAS GLOBE ═════════════════════════════════════════════════════ */ .noc--globe{aspect-ratio:1;max-width:560px} .noc-canvas{width:100%;height:auto;aspect-ratio:1;display:block}