/* ============================================================================= lex-juris.ai — the public site, mockup v1 (2026-09-02). WHY: the Google for Startups Cloud Program declined us on the WEBSITE — it must show a live, launched product interface and verifiable founders/team. This is a real product site in one file: Home · Product · Security · Pricing · Company · Contact (hash routes). The imagery is the product itself: Hebrew RTL frames of the live Platinum Dawn app, drawn in CSS here; the build replaces them with real screenshots. Copy is DRAFT (founder: content later). Anything marked .ph is a placeholder. ============================================================================= */ *{margin:0;padding:0;box-sizing:border-box} :root{ --ink:#0b2846;--ink2:#3a5b80;--ink3:#6b84a3; --paper:#ffffff;--silver:#f3f4f8;--silver2:#e9ebf1;--hair:#eceff5; --line:rgba(33,42,74,.12);--line2:rgba(33,42,74,.22); --cobalt:#2f5fe0;--cobalt2:#4c6ef5;--cobalt-deep:#2348b8;--cyan:#19a7cf;--violet:#8b5cf6; --night:#0a1626;--night2:#0e2138;--night3:#143152; --ok:#0f766e;--warn:#b45309;--bad:#b91c1c; --lens:0 34px 80px -32px rgba(31,60,96,.30),0 7px 24px -12px rgba(31,60,96,.14),inset 0 1.5px 0 rgba(255,255,255,.94); --r:12px; } html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}} body{font-family:"Heebo",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper); font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :is(a,button,input,textarea):focus-visible{outline:2px solid var(--cobalt2);outline-offset:3px;border-radius:6px} .wrap{max-width:1200px;margin:0 auto;padding:0 32px} .h1{font-size:clamp(42px,5.4vw,68px);font-weight:800;letter-spacing:-.028em;line-height:1.02} .h2{font-size:clamp(30px,3.3vw,44px);font-weight:700;letter-spacing:-.022em;line-height:1.08} .h3{font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.25} .lead{font-size:19px;line-height:1.55;color:var(--ink2);max-width:60ch} .muted{color:var(--ink2)} .small{font-size:14px;color:var(--ink3)} p+p{margin-top:12px} .btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:11px;font-weight:600;font-size:16px; background:linear-gradient(135deg,var(--cobalt2),var(--cobalt) 60%,var(--cobalt-deep));color:#fff; box-shadow:0 10px 24px -12px rgba(47,95,224,.7),inset 0 1px 0 rgba(255,255,255,.28);transition:transform .15s ease,box-shadow .15s ease} .btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px -12px rgba(47,95,224,.8),inset 0 1px 0 rgba(255,255,255,.28)} .btn.ghost{background:rgba(255,255,255,.7);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)} .btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ink2)} .btn.night{background:#fff;color:var(--ink);box-shadow:none} .btn.sm{height:38px;padding:0 14px;font-size:14px;border-radius:9px} .link{color:var(--cobalt);font-weight:600} .link:hover{text-decoration:underline} .sec{padding:104px 0} .sec.tight{padding:72px 0} .sec.silver{background:var(--silver)} .sec.night{background:radial-gradient(40% 32% at 28% 22%,rgba(47,95,224,.18),transparent 70%),radial-gradient(36% 30% at 74% 68%,rgba(139,92,246,.14),transparent 72%),linear-gradient(172deg,var(--night) 0%,var(--night2) 54%,var(--night3) 100%);color:#eef2fb} .sec.night .muted,.sec.night .lead{color:#c4cde0} .sec-head{max-width:760px;margin-bottom:56px} .sec-head .h2{margin-bottom:16px} .two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .two.rev>.txt{order:2} .txt .h2{margin-bottom:16px} .txt ul{list-style:none;margin-top:22px;display:grid;gap:10px} .txt li{padding-left:26px;position:relative;color:var(--ink2)} .txt li::before{content:"";position:absolute;left:0;top:11px;width:14px;height:2px;background:var(--cobalt);border-radius:2px} /* placeholders — visibly marked in the mockup */ .ph{background-image:linear-gradient(90deg,var(--warn) 50%,transparent 50%);background-size:6px 1.5px;background-repeat:repeat-x;background-position:0 100%;padding-bottom:1px;cursor:help} body.ph-loud .ph{background-color:#fff3d6;border-radius:3px} /* ---- header ------------------------------------------------------------------ */ .hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.84);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line)} .hdr .wrap{display:flex;align-items:center;gap:8px;height:68px} .brand{display:flex;align-items:center;gap:10px;margin-right:24px;font-weight:700;font-size:19px;letter-spacing:-.01em} .brand svg{width:34px;height:34px} .nav{display:flex;align-items:center;gap:2px;flex:1} .nav>li{list-style:none;position:relative} .nav>li>a,.nav>li>button{display:flex;align-items:center;gap:5px;height:40px;padding:0 13px;border-radius:9px;font-weight:500;font-size:15px;color:var(--ink2)} .nav>li>a:hover,.nav>li>button:hover,.nav>li.on>a,.nav>li.on>button{color:var(--ink);background:var(--silver)} .nav .chev{width:10px;height:10px;opacity:.6} .mega{position:absolute;top:48px;left:0;min-width:560px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 60px -30px rgba(11,40,70,.35),0 6px 18px -8px rgba(11,40,70,.12);padding:16px;display:none;grid-template-columns:1fr 1fr;gap:4px 8px} .mega.one{min-width:280px;grid-template-columns:1fr} .nav>li:hover .mega,.nav>li:focus-within .mega{display:grid} .mega a{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:10px 12px;border-radius:10px;align-items:start} .mega a:hover{background:var(--silver)} .mega b{display:block;font-weight:600;font-size:15px;line-height:1.3} .mega span{display:block;font-size:13px;color:var(--ink3);line-height:1.35} .mega i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:linear-gradient(155deg,#eef2ff,#e2e8ff);color:var(--cobalt);font-style:normal;font-weight:700;font-size:13px} .hdr-right{display:flex;align-items:center;gap:8px} .lang{display:inline-flex;align-items:center;height:36px;padding:0 10px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ink2);border:1px solid var(--line)} .signin{font-weight:600;font-size:15px;padding:0 12px;color:var(--ink)} .burger{display:none;width:40px;height:40px;border-radius:9px;border:1px solid var(--line)} /* ---- hero ------------------------------------------------------------------- */ .hero{position:relative;overflow:hidden;background:linear-gradient(172deg,#f5f6fa 0%,#e9eaf0 55%,#d9dbe4 100%)} .hero .bloom{position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none} .hero .b1{width:720px;height:520px;left:44%;top:-160px;background:radial-gradient(closest-side,rgba(47,95,224,.28),transparent 70%)} .hero .b2{width:560px;height:460px;left:-140px;bottom:-200px;background:radial-gradient(closest-side,rgba(139,92,246,.22),transparent 70%)} .hero .b3{width:420px;height:320px;right:-80px;bottom:-40px;background:radial-gradient(closest-side,rgba(25,167,207,.22),transparent 70%)} .hero .wrap{position:relative;display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center;padding-top:96px;padding-bottom:104px} .hero .copy{max-width:540px} .live{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 10px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);box-shadow:0 6px 16px -10px rgba(11,40,70,.3);font-size:13.5px;font-weight:500;color:var(--ink2);margin-bottom:26px} .live .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(15,118,110,.15)} .hero .h1{margin-bottom:22px} .hero .lead{margin-bottom:34px} .ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .hero .fine{margin-top:18px;font-size:14px;color:var(--ink3)} .hero .stage{position:relative;transform:perspective(1800px) rotateY(-6deg) rotateX(2deg);transform-origin:left center} .hero .stage .fr{width:min(760px,100%)} @keyframes rise{from{opacity:0;transform:perspective(1800px) rotateY(-6deg) rotateX(2deg) translateY(28px)}to{opacity:1;transform:perspective(1800px) rotateY(-6deg) rotateX(2deg) translateY(0)}} .hero .stage{animation:rise .9s cubic-bezier(.2,.7,.2,1) both .1s} /* ---- proof strip -------------------------------------------------------------- */ .proof{border-bottom:1px solid var(--line)} .proof .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .proof div{padding:26px 24px 26px 0;border-left:1px solid var(--line);padding-left:24px} .proof div:first-child{border-left:0;padding-left:0} .proof b{display:block;font-size:17px;font-weight:600;line-height:1.3;margin-bottom:4px} .proof span{font-size:14px;color:var(--ink3);line-height:1.4;display:block} /* ---- the product frames: Hebrew RTL facsimiles of the live Platinum Dawn app ------ */ .fr{direction:rtl;text-align:right;position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.85); background:radial-gradient(46% 38% at 30% 24%,rgba(242,244,250,.85),transparent 70%),radial-gradient(42% 30% at 84% -6%,rgba(47,95,224,.11),transparent 65%),linear-gradient(172deg,#f3f3f6 0%,#e5e6ec 52%,#d3d5de 100%); box-shadow:var(--lens);font-size:12px;line-height:1.4;color:var(--ink)} .fr-bar{direction:ltr;display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:rgba(255,255,255,.72);border-bottom:1px solid rgba(33,42,74,.08)} .fr-bar i{width:10px;height:10px;border-radius:50%;background:#e4e6ec;border:1px solid rgba(0,0,0,.08)} .fr-bar i:nth-child(1){background:#ff5f57}.fr-bar i:nth-child(2){background:#febc2e}.fr-bar i:nth-child(3){background:#28c840} .fr-bar .url{margin-left:12px;flex:1;max-width:320px;height:20px;border-radius:6px;background:var(--silver);font-size:11px;color:var(--ink3);display:flex;align-items:center;padding:0 10px;gap:6px} .fr-bar .url::before{content:"🔒";font-size:9px} .fr-body{display:grid;grid-template-columns:132px 1fr;min-height:420px} .fr.tall .fr-body{min-height:470px} .fr.short .fr-body{min-height:300px} .fr-body.norail{grid-template-columns:1fr} .rail{margin:14px 12px 14px 0;padding:10px 8px;border-radius:16px;background:linear-gradient(155deg,rgba(242,244,250,.55),rgba(242,244,250,.31) 48%,rgba(47,95,224,.18));box-shadow:inset 0 1px 0 rgba(242,244,250,.92),0 20px 40px -24px rgba(33,42,74,.35);display:flex;flex-direction:column;gap:2px} .rail .lj{display:flex;align-items:center;gap:6px;padding:4px 6px 12px;font-weight:700;font-size:12px} .rail .lj i{width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,var(--ink),#1c4f8a 60%,var(--cyan))} .ri{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:9px;color:var(--ink2);font-size:11.5px;font-weight:500} .ri::before{content:"";width:7px;height:7px;border-radius:2px;background:rgba(58,91,128,.35)} .ri.on{background:rgba(255,255,255,.78);color:var(--ink);box-shadow:0 6px 14px -10px rgba(33,42,74,.4)} .ri.on::before{background:var(--cobalt)} .rail .sp{flex:1} .rail .me{display:flex;align-items:center;gap:7px;padding:6px 8px;font-size:11px;color:var(--ink2)} .rail .me i{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#c9d6ff,#8da4fb)} .main{padding:16px 16px 14px 14px;display:flex;flex-direction:column;gap:12px;min-width:0} .sent{font-size:15px;font-weight:600;line-height:1.35;letter-spacing:-.005em} .sent em{font-style:normal;font-weight:600;color:var(--cobalt)} .pills{display:flex;gap:6px;flex-wrap:wrap} .pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);font-size:11px;font-weight:500;color:var(--ink2);box-shadow:0 4px 10px -8px rgba(33,42,74,.4)} .pill.warn{color:var(--warn);background:#fff4e2}.pill.ok{color:var(--ok);background:#e6f6f3}.pill.bad{color:var(--bad);background:#fdecec} .notes{display:flex;gap:10px} .note{flex:1;min-height:64px;padding:8px 10px;border-radius:4px;background:#fff6b3;box-shadow:0 8px 16px -10px rgba(120,90,0,.35);font-size:11px;line-height:1.35;transform:rotate(-.6deg)} .note:nth-child(2){background:#dff3ff;transform:rotate(.5deg)}.note:nth-child(3){background:#e9fbe4;transform:rotate(-.3deg)} .note b{display:block;font-weight:600;margin-bottom:2px} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .gcard{padding:10px 12px;border-radius:12px;background:linear-gradient(155deg,rgba(255,255,255,.82),rgba(255,255,255,.6));border:1px solid rgba(255,255,255,.9);box-shadow:0 12px 28px -18px rgba(33,42,74,.35);min-height:96px} .gcard h6{font-size:12px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between} .gcard h6 span{font-weight:400;color:var(--ink3);font-size:10.5px} .gcard p{font-size:11px;color:var(--ink2);line-height:1.4} .gcard .row{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-top:1px solid rgba(33,42,74,.07);font-size:11px} .gcard .row:first-of-type{border-top:0} .gcard .row span{color:var(--ink3);white-space:nowrap} .audio{display:flex;align-items:center;gap:6px;margin-top:6px} .audio i{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--cobalt2),var(--cobalt-deep));position:relative} .audio i::after{content:"";position:absolute;left:8px;top:6px;border-left:6px solid #fff;border-top:4px solid transparent;border-bottom:4px solid transparent} .audio b{flex:1;height:3px;border-radius:3px;background:rgba(33,42,74,.15);position:relative} .audio b::after{content:"";position:absolute;right:0;top:0;height:100%;width:38%;border-radius:3px;background:var(--cobalt)} .audio span{font-size:10px;color:var(--ink3)} .composer{margin-top:auto;display:flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 10px;border-radius:14px;background:rgba(255,255,255,.9);border:1px solid rgba(33,42,74,.14);box-shadow:0 10px 24px -16px rgba(33,42,74,.4)} .composer span{flex:1;color:var(--ink3);font-size:11.5px} .composer .k{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--cobalt2),var(--cobalt-deep));display:grid;place-items:center} .composer .k::after{content:"";width:12px;height:8px;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px);border-radius:2px;opacity:.95} .composer .a{width:22px;height:22px;border-radius:50%;border:1px dashed rgba(33,42,74,.35)} /* journey */ .jhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px} .jhead h5{font-size:13px;font-weight:600} .jhead span{font-size:10.5px;color:var(--ink3)} .tabs-mini{display:flex;gap:2px;padding:3px;border-radius:10px;background:rgba(33,42,74,.06);align-self:flex-start} .tabs-mini i{font-style:normal;padding:3px 9px;border-radius:7px;font-size:11px;color:var(--ink2)} .tabs-mini i.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 4px 10px -8px rgba(33,42,74,.5)} .track{display:grid;grid-template-columns:1fr 1.5fr 1fr 1fr;gap:8px;align-items:stretch} .stg{padding:9px 10px;border-radius:12px;font-size:11px;min-height:86px;position:relative} .stg h6{font-size:11.5px;font-weight:600;margin-bottom:4px;display:flex;justify-content:space-between} .stg p{color:var(--ink2);line-height:1.35} .stg.done{background:rgba(15,118,110,.09);border:1px solid rgba(15,118,110,.18)} .stg.done h6::after{content:"✓";color:var(--ok);font-weight:700} .stg.here{background:rgba(255,255,255,.9);border:1px solid rgba(47,95,224,.35);box-shadow:0 14px 30px -18px rgba(47,95,224,.5)} .stg.here .tag{position:absolute;top:-9px;right:10px;background:var(--cobalt);color:#fff;font-size:9.5px;font-weight:600;padding:1px 7px;border-radius:999px} .stg .amber{display:block;margin:6px 0;padding:5px 7px;border-radius:7px;background:#fff4e2;color:var(--warn);font-size:10.5px} .stg .go{display:inline-block;margin-top:2px;padding:4px 9px;border-radius:7px;background:linear-gradient(135deg,var(--cobalt2),var(--cobalt-deep));color:#fff;font-weight:600;font-size:10.5px} .stg.ghost{border:1.5px dashed rgba(33,42,74,.25);color:var(--ink3)} .stg.ghost h6{color:var(--ink2)} .feed{display:grid;gap:4px;font-size:11px} .feed div{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-top:1px solid rgba(33,42,74,.07)} .feed span{color:var(--cobalt);font-size:10.5px;white-space:nowrap} /* editor */ .edit{display:grid;grid-template-columns:1fr 168px;gap:12px;min-height:100%} .paper{background:#fff;border:1px solid rgba(33,42,74,.1);box-shadow:0 20px 40px -26px rgba(33,42,74,.5);padding:0 0 16px;font-size:10.5px;line-height:1.5;position:relative} .paper .lh{height:38px;margin:0 0 14px;background:linear-gradient(90deg,#f1f4fb,#fff);border-bottom:2px solid var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:9.5px;color:var(--ink2)} .paper .lh b{font-size:11px;color:var(--ink);letter-spacing:.02em} .paper .bd{padding:0 18px} .paper h4{text-align:center;font-size:13px;font-weight:700;text-decoration:underline;margin:4px 0 10px} .paper p{margin:0 0 7px;text-align:justify} .ins{color:var(--ok);text-decoration:underline;text-decoration-color:rgba(15,118,110,.6);background:rgba(15,118,110,.08)} .del{color:var(--bad);text-decoration:line-through;opacity:.8} .paper .pg{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:9px;color:var(--ink3)} .side{display:flex;flex-direction:column;gap:8px} .side .gcard{min-height:0} .side .sug{font-size:10.5px;color:var(--ink2);line-height:1.4} .side .btns{display:flex;gap:5px;margin-top:6px} .side .btns i{font-style:normal;padding:3px 8px;border-radius:6px;font-size:10px;font-weight:600;background:var(--cobalt);color:#fff} .side .btns i+i{background:rgba(33,42,74,.08);color:var(--ink2)} /* chat */ .chat{display:flex;flex-direction:column;gap:9px;flex:1} .bub{max-width:82%;padding:8px 11px;border-radius:14px;font-size:11.5px;line-height:1.45} .bub.user{align-self:flex-start;background:rgba(255,255,255,.9);border:1px solid rgba(33,42,74,.1);border-bottom-left-radius:4px} .bub.lex{align-self:flex-end;background:transparent;padding:0 2px;max-width:92%} .bub.lex p{margin:0 0 6px} .src{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:999px;background:#eef2ff;color:var(--cobalt);font-size:10px;font-weight:600;vertical-align:middle} .act{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:9px;background:rgba(255,255,255,.85);border:1px solid rgba(33,42,74,.1);font-size:11px;max-width:92%;align-self:flex-end} .act b{color:var(--ok);font-weight:700} .act span{flex:1} .act i{font-style:normal;color:var(--ink3);font-size:10.5px} .think{font-size:10.5px;color:var(--ink3);align-self:flex-end} /* calendar */ .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;flex:1} .cal .d{border-radius:10px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);padding:6px;min-height:150px;font-size:10px} .cal .d.today{background:rgba(255,255,255,.92);border-color:rgba(47,95,224,.45)} .cal .d h6{font-size:10.5px;font-weight:600;color:var(--ink2);margin-bottom:6px;display:flex;justify-content:space-between} .cal .d.today h6{color:var(--cobalt)} .ev{padding:3px 6px;border-radius:6px;margin-bottom:4px;background:#eef2ff;color:var(--ink);line-height:1.3;border-right:2px solid var(--cobalt)} .ev.tk{background:#fff;border-right-color:rgba(33,42,74,.35)} .ev.late{background:#fdecec;border-right-color:var(--bad);color:var(--bad)} .ev.hear{background:#efe9ff;border-right-color:var(--violet)} .calhead{display:flex;justify-content:space-between;align-items:center} .calhead .seg{display:flex;gap:2px;padding:3px;border-radius:9px;background:rgba(33,42,74,.06)} .calhead .seg i{font-style:normal;padding:2px 8px;border-radius:6px;font-size:10.5px;color:var(--ink2)} .calhead .seg i.on{background:#fff;color:var(--ink);font-weight:600} /* research */ .ans{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);border-radius:12px;padding:10px 12px;font-size:11.5px;line-height:1.5} .ans p{margin-bottom:6px} .srcs{display:grid;grid-template-columns:1fr 1fr;gap:8px} .srcc{padding:8px 10px;border-radius:10px;background:#fff;border:1px solid rgba(33,42,74,.1);font-size:10.5px;line-height:1.35} .srcc b{display:block;font-weight:600;font-size:11px;margin-bottom:2px} .srcc em{font-style:normal;color:var(--ok);font-size:10px;display:block;margin-top:4px} .srcc.law b::before{content:"§ ";color:var(--cobalt)} /* small tiles */ .tile-fr{pointer-events:none} .forms{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:4px 0} .form{aspect-ratio:3/4;background:#fff;border:1px solid rgba(33,42,74,.12);box-shadow:0 10px 20px -14px rgba(33,42,74,.5);padding:8px 7px;font-size:7.5px;line-height:1.3;color:var(--ink2);position:relative} .form b{display:block;text-align:center;font-size:8px;color:var(--ink);margin-bottom:5px} .form i{display:block;height:5px;border-bottom:1px solid rgba(33,42,74,.25);margin-bottom:4px} .form i.f{border-bottom-color:transparent;position:relative} .form i.f::after{content:attr(data-v);position:absolute;right:2px;top:-3px;color:#1e40af;font-style:italic;font-size:7.5px;font-family:"David Libre","Heebo",serif} .form .rd{position:absolute;top:5px;left:5px;padding:0 4px;border-radius:999px;background:#e6f6f3;color:var(--ok);font-size:7px;font-weight:600} .calc{background:#fff;border-radius:10px;border:1px solid rgba(33,42,74,.1);font-size:10.5px;overflow:hidden} .calc .r{display:grid;grid-template-columns:1.4fr 1fr 1fr;padding:5px 9px;border-top:1px solid rgba(33,42,74,.07)} .calc .r:first-child{border-top:0;background:var(--silver);font-weight:600} .calc .r.t{font-weight:700;background:#eef2ff} .calc .r span:not(:first-child){text-align:left;direction:ltr;font-variant-numeric:tabular-nums} .orb{width:74px;height:74px;border-radius:50%;margin:8px auto 4px;background:radial-gradient(circle at 35% 30%,#fff,rgba(255,255,255,0) 40%),conic-gradient(from 200deg,var(--cobalt2),var(--violet),var(--cyan),var(--cobalt2));box-shadow:0 18px 40px -16px rgba(47,95,224,.7);animation:breathe 4.5s ease-in-out infinite} @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} .state{text-align:center;font-size:12px;font-weight:600;color:var(--ink2)} .mail{background:#fff;border-radius:10px;border:1px solid rgba(33,42,74,.1);padding:10px 12px;font-size:10.5px;line-height:1.45} .mail .hd{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;color:var(--ink3);margin-bottom:6px;font-size:10px} .mail .hd b{color:var(--ink);font-weight:500} .mail .att{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:6px;background:var(--silver);font-size:9.5px;margin-top:6px} .sentchip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;background:#e6f6f3;color:var(--ok);font-size:10px;font-weight:600} /* ---- feature tabs ------------------------------------------------------------ */ .ftabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:40px} .ftabs button{height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line2);font-weight:500;font-size:15px;color:var(--ink2);background:#fff} .ftabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)} .fpanel{display:none} .fpanel.on{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center} .fpanel .txt .h2{font-size:clamp(26px,2.6vw,36px)} /* ---- product grid ------------------------------------------------------------ */ .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px} .tile{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;display:flex;flex-direction:column} .tile .shot{padding:22px 22px 0;background:linear-gradient(180deg,var(--silver),#fff)} .tile .shot .fr{border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:0 18px 40px -26px rgba(31,60,96,.5)} .tile .shot .fr-body{min-height:190px} .tile .body{padding:22px 24px 26px} .tile .h3{margin-bottom:8px} .tile p{color:var(--ink2);font-size:15.5px} .tile .link{display:inline-block;margin-top:14px;font-size:15px} /* ---- steps (a real sequence) --------------------------------------------------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s} .step{position:relative;padding:28px 26px 30px;border-radius:18px;background:#fff;border:1px solid var(--line)} .step::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:24px;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px} .step .h3{margin:6px 0 8px} .step p{color:var(--ink2);font-size:15.5px} .step .mini{margin-top:18px;padding:12px;border-radius:12px;background:var(--silver);direction:rtl;text-align:right;font-size:12px;line-height:1.45;color:var(--ink2)} .step .mini b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px} /* ---- trust (night) --------------------------------------------------------------- */ .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px} .trust div{padding-top:22px;border-top:1px solid rgba(200,210,235,.25)} .trust b{display:block;font-size:19px;font-weight:600;line-height:1.3;margin-bottom:8px;color:#fff} .trust p{color:#c4cde0;font-size:15px} .verdict{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(121,214,200,.14);color:#9fe6da;font-weight:600;font-size:14px;margin-bottom:22px} /* ---- people ---------------------------------------------------------------------- */ .people{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .person{border:1px solid var(--line);border-radius:18px;padding:24px;background:#fff;display:grid;grid-template-columns:84px 1fr;gap:18px;align-items:start} .person .ph-img{width:84px;height:84px;border-radius:50%;background:linear-gradient(155deg,#dfe6fb,#c5d2f5);display:grid;place-items:center;color:var(--cobalt-deep);font-weight:700;font-size:24px} .person b{display:block;font-size:18px;font-weight:600;line-height:1.2} .person .role{display:block;color:var(--ink2);font-size:14.5px;margin:2px 0 10px} .person p{font-size:14.5px;color:var(--ink2);line-height:1.5;margin-bottom:12px} .lnk{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--line2);font-size:13.5px;font-weight:600;color:var(--ink)} .lnk svg{width:15px;height:15px} .lnk:hover{background:var(--silver)} /* ---- voices / latest ----------------------------------------------------------------- */ .quote{padding:28px;border-radius:18px;background:#fff;border:1px solid var(--line)} .quote p{font-size:18px;line-height:1.5;font-weight:500;letter-spacing:-.005em;margin-bottom:18px} .quote .who{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink2)} .quote .who i{width:36px;height:36px;border-radius:50%;background:linear-gradient(155deg,#e6ecfb,#c9d6f5)} .post{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#fff} .post .img{height:180px;background:linear-gradient(135deg,#dfe6fb,#eef2ff 60%,#e7e0ff)} .post .img.b{background:linear-gradient(135deg,var(--night2),var(--night3))} .post .img.c{background:linear-gradient(135deg,#d9f2f8,#eef8fb)} .post .body{padding:20px 22px 24px} .post .kind{font-size:13px;color:var(--ink3);margin-bottom:6px} .post b{display:block;font-size:18px;font-weight:600;line-height:1.3;margin-bottom:8px} .post p{font-size:15px;color:var(--ink2)} /* ---- cta band + footer ---------------------------------------------------------- */ .cta{background:linear-gradient(172deg,#f5f6fa 0%,#e9eaf0 55%,#dcdee6 100%);position:relative;overflow:hidden} .cta .wrap{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding-top:80px;padding-bottom:80px} .cta .h2{margin-bottom:10px} .ftr{background:#fff;border-top:1px solid var(--line);padding:56px 0 28px;font-size:14.5px} .ftr .cols{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px;margin-bottom:40px} .ftr h5{font-size:14px;font-weight:600;margin-bottom:14px} .ftr ul{list-style:none;display:grid;gap:9px} .ftr a{color:var(--ink2)} .ftr a:hover{color:var(--ink)} .ftr .about p{color:var(--ink2);margin:10px 0 14px;max-width:34ch} .ftr .legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line);color:var(--ink3);font-size:13.5px} .ftr .legal a{margin-right:16px;color:var(--ink3)} .soc{display:flex;gap:8px;margin-top:6px} .soc a{width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;color:var(--ink2)} .soc svg{width:15px;height:15px} /* ---- pages -------------------------------------------------------------------------- */ .page{display:none} .page.on{display:block} .phead{padding:88px 0 56px;background:linear-gradient(172deg,#f5f6fa 0%,#eceef3 100%);border-bottom:1px solid var(--line)} .phead .h1{font-size:clamp(38px,4.6vw,58px);margin-bottom:16px} .subnav{position:sticky;top:68px;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .subnav .wrap{display:flex;gap:2px;overflow-x:auto;height:52px;align-items:center} .subnav a{white-space:nowrap;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink2)} .subnav a:hover{background:var(--silver);color:var(--ink)} .cap{padding:88px 0;border-bottom:1px solid var(--line)} .cap .two{gap:72px} .cap .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px} .cap .facts div{padding-top:14px;border-top:1px solid var(--line2)} .cap .facts b{display:block;font-size:16px;font-weight:600;margin-bottom:3px} .cap .facts span{font-size:14px;color:var(--ink2)} .faq{max-width:820px} .faq details{border-top:1px solid var(--line);padding:6px 0} .faq details:last-child{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0;font-size:18px;font-weight:600} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-weight:400;font-size:24px;color:var(--ink3)} .faq details[open] summary::after{content:"–"} .faq .a{padding:0 0 18px;color:var(--ink2);max-width:70ch} /* security */ .shield{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .shield div{padding:24px;border-radius:16px;border:1px solid var(--line);background:#fff} .shield b{display:block;font-size:17px;font-weight:600;margin-bottom:6px} .shield p{font-size:15px;color:var(--ink2)} .subs{width:100%;border-collapse:collapse;font-size:15px} .subs th,.subs td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)} .subs th{font-weight:600;color:var(--ink2);font-size:13.5px} /* pricing */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch} .plan{border:1px solid var(--line);border-radius:20px;padding:30px 28px;background:#fff;display:flex;flex-direction:column} .plan.hi{border-color:var(--cobalt);box-shadow:0 30px 60px -40px rgba(47,95,224,.6)} .plan .name{font-size:20px;font-weight:600} .plan .for{color:var(--ink2);font-size:14.5px;margin:4px 0 18px} .plan .price{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1} .plan .per{color:var(--ink3);font-size:14px;margin:6px 0 22px} .plan ul{list-style:none;display:grid;gap:9px;margin-bottom:26px;color:var(--ink2);font-size:15px} .plan li{padding-left:24px;position:relative} .plan li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700} .plan .btn{margin-top:auto;justify-content:center} /* company */ .story{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:start} .facts-card{border:1px solid var(--line);border-radius:18px;padding:26px;background:var(--silver)} .facts-card dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:15px} .facts-card dt{color:var(--ink3)} .facts-card dd{font-weight:500} .timeline{display:grid;gap:0;margin-top:40px} .timeline div{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:16px 0;border-top:1px solid var(--line);font-size:15.5px} .timeline b{color:var(--ink2);font-weight:500} /* contact */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .form-grid label{display:grid;gap:6px;font-size:14px;font-weight:500;color:var(--ink2)} .form-grid label.full{grid-column:1/-1} .form-grid input,.form-grid textarea{height:46px;padding:0 14px;border-radius:10px;border:1px solid var(--line2);font:inherit;font-size:15px;background:#fff} .form-grid textarea{height:140px;padding:12px 14px;resize:vertical} /* mockup bar */ .mock{position:fixed;left:16px;bottom:16px;z-index:80;display:flex;gap:6px;align-items:center;padding:6px 6px 6px 12px;border-radius:999px;background:rgba(11,40,70,.92);color:#fff;font-size:12.5px;box-shadow:0 14px 30px -12px rgba(0,0,0,.5)} .mock button{padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:12px} .mock button.on{background:#fff;color:var(--ink)} /* responsive */ @media (max-width:1100px){.hero .wrap{grid-template-columns:1fr;min-height:0;padding-top:64px}.hero .stage{transform:none;animation:none}.hero .stage .fr{width:100%}.proof .wrap{grid-template-columns:1fr 1fr}.proof div:nth-child(3){border-left:0;padding-left:0}.fpanel.on{grid-template-columns:1fr}.grid3,.people,.steps,.plans,.shield{grid-template-columns:1fr 1fr}.trust{grid-template-columns:1fr 1fr}.ftr .cols{grid-template-columns:1fr 1fr 1fr}.story{grid-template-columns:1fr}} @media (max-width:760px){.wrap{padding:0 20px}.nav,.lang,.signin{display:none}.burger{display:block}.two,.grid2,.grid3,.people,.steps,.plans,.shield,.trust,.form-grid,.proof .wrap{grid-template-columns:1fr}.two.rev>.txt{order:0}.proof div{border-left:0;padding-left:0}.sec{padding:64px 0}.cta .wrap{grid-template-columns:1fr}.ftr .cols{grid-template-columns:1fr 1fr}.fr-body{grid-template-columns:1fr}.rail{display:none}.cap .facts{grid-template-columns:1fr}} /* ===== the dawn scene (ported from welcome-dawn.html, scoped) ===== */ @keyframes dw-heroshift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } @keyframes dw-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes dw-riseUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes dw-flareGrow { from { opacity: 0; transform: translate(-50%, -50%) rotate(var(--tan)) scaleX(.12); } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--tan)) scaleX(1); } } @keyframes dw-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .88; } } @keyframes dw-raysIn { from { opacity: 0; } to { opacity: .4; } } @keyframes dw-raysBreathe { 0%, 100% { opacity: .4; } 50% { opacity: .26; } } @keyframes dw-contact { 0% { opacity: 0; } 35% { opacity: .9; } 100% { opacity: 0; } } .dawn { /* =========================================================================== /welcome — "שחר של יום חדש" concept mockup. THE STORY — the theme toggle is the time of day: Nocturne (dark) = 05:45, the exact second dawn breaks over the planet. Daylight (light) = 06:15, the sun has risen; the morning is here. THE SCENE — a low horizon (~61vh). The headline lives in the clean black sky; the planet is a solid mass below, wearing the living point-network; a razor-thin atmosphere hugs the limb; the sunrise breaks LEFT of center — in Hebrew the eye reads toward the left, so the reader walks INTO the light ("עשור קדימה" — forward is leftward). Physics kept honest (what separates cinema from cheese): · the atmosphere is THIN (a ~60px band on a ~2500px planet), · glow bleeds only OUTWARD into space — the solid body occludes it, for free, because every glow layer is painted BEHIND the planet, · stars die near the sun (exposure) and near the limb (atmosphere), · nothing twinkles; one slow breath; the entrance happens once. =========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } & { /* --- Nocturne (dark) — the moment of dawn --- */ --bg: #05070d; --paper: #0a0e1b; --body-1: #10162a; /* planet body, lit side (near limb) */ --body-2: #080b16; /* planet body, deep */ --ink: #eaeef9; --ink-2: #a9b2c9; --ink-3: #6f7b98; --rule: rgba(255,255,255,.08); --rule-2: rgba(255,255,255,.16); --card1: rgba(255,255,255,.05); --brand: #5b7cff; --brand-hi: #8ea5ff; --acc-v: #8b5cf6; --acc-c: #22d3ee; --acc-r: #f472b6; --hero-a: #ffffff; --hero-b: #9fb4ff; /* the dawn */ --sun-core: #fff7e2; --atm-ring: 140,165,255; /* the cool full-limb shell */ --dawn-gold: 255,214,140; --dawn-rose: 244,114,182; --dawn-violet: 139,92,246; --dawn-cyan: 34,211,238; --grain-o: .05; } /* FOUNDER RULING 2026-08-13: the home page is DARK ONLY — the dawn IS the page. The rest of the product keeps Daylight as its default; this one screen pins Nocturne. (No toggle, no light block.) */ /* --------------------------------------------------------------------------- The stage. Geometry arrives from JS as px custom properties: --cx/--cy/--R the planet circle --sx/--sy the sun-break point ON the limb --tan the limb's tangent angle at the sun (deg) --------------------------------------------------------------------------- */ .dstage { position: relative; min-height: 100vh; overflow: hidden; background: var(--bg); } /* --- 0 · the sky ---------------------------------------------------------- */ .sky { position: absolute; inset: 0; background: linear-gradient(180deg, #03040a 0%, #060913 46%, #0b1020 78%, #101731 100%); } /* --- the parallax groups: the world shifts under the cursor, the words hold still. All limb-anchored layers ride ONE group so the geometry can never come apart; the stars ride farther, so they move less. --- */ .pstars, .pgroup { position: absolute; inset: 0; will-change: transform; } /* --- 1 · stars (canvas, painted once) ------------------------------------- */ .stars { position: absolute; inset: 0; } /* --- 2 · the dawn light, BEHIND the planet ------------------------------- Every layer here is centered on the sun-break (or the planet center), and the solid planet painted on top occludes the lower half: light physically cannot bleed onto the body. The shell ring is thin; the break bloom is the only thing allowed to climb. --------------------------------------------- */ .atm { position: absolute; inset: 0; } .atm b { /* the thin full-limb shell */ position: absolute; inset: 0; background: radial-gradient(circle at var(--cx) var(--cy), transparent calc(var(--R) - 2px), rgba(var(--atm-ring), .30) var(--R), rgba(var(--atm-ring), .12) calc(var(--R) + 26px), rgba(var(--atm-ring), .04) calc(var(--R) + 54px), transparent calc(var(--R) + 86px)); } .atm i { /* the dawn bloom at the break — Rayleigh ramp */ position: absolute; inset: 0; background: /* the rising light pillar — the Pandora glow, a whisper */ radial-gradient(ellipse 110px 460px at var(--sx) calc(var(--sy) - 180px), rgba(var(--dawn-gold), .10), rgba(var(--dawn-gold), 0) 70%), radial-gradient(ellipse 720px 520px at var(--sx) calc(var(--sy) - 90px), rgba(var(--dawn-gold), .06), rgba(var(--dawn-gold), 0) 70%), radial-gradient(ellipse 240px 150px at var(--sx) var(--sy), rgba(var(--dawn-gold), .85), rgba(var(--dawn-gold), 0) 70%), radial-gradient(ellipse 560px 300px at var(--sx) var(--sy), rgba(var(--dawn-rose), .40), rgba(var(--dawn-rose), 0) 68%), /* violet + cyan are REFRACTION, not the show — gold/rose own the dawn */ radial-gradient(ellipse 1000px 470px at var(--sx) var(--sy), rgba(var(--dawn-violet), .16), rgba(var(--dawn-violet), 0) 70%), radial-gradient(ellipse 1400px 640px at var(--sx) var(--sy), rgba(var(--dawn-cyan), .07), rgba(var(--dawn-cyan), 0) 76%); } /* --- 3 · the planet body --------------------------------------------------- */ .planet { position: absolute; inset: 0; background: /* a whisper of warmth on the surface under the break — the terminator */ radial-gradient(ellipse 820px 250px at var(--sx) calc(var(--sy) + 170px), rgba(var(--dawn-gold), .10), transparent 62%), /* the body: slightly lit at the limb, falling into depth */ radial-gradient(circle at var(--cx) var(--cy), var(--body-2) calc(var(--R) - 480px), var(--body-1) calc(var(--R) - 60px), var(--paper) calc(var(--R) - 1px), transparent var(--R)); } /* --- 4 · the living network (canvas) --------------------------------------- */ .net { position: absolute; inset: 0; } /* --- 5 · the limb line (SVG, gradient stroke) ------------------------------ */ .rim { position: absolute; inset: 0; pointer-events: none; } /* --- 6 · the sun ----------------------------------------------------------- */ .sun { position: absolute; inset: 0; pointer-events: none; } .sun .core { position: absolute; left: var(--sx); top: var(--sy); width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--sun-core); box-shadow: 0 0 10px 3px rgba(255, 250, 230, .95), 0 0 34px 10px rgba(var(--dawn-gold), .55), 0 0 90px 34px rgba(var(--dawn-gold), .22); } /* the flare hugs the horizon: rotated to the limb's tangent */ .sun .flare { position: absolute; left: var(--sx); top: var(--sy); width: 60vw; height: 2px; transform: translate(-50%, -50%) rotate(var(--tan)); background: linear-gradient(90deg, transparent, rgba(255, 244, 214, .85) 46%, #fffdf4 50%, rgba(255, 244, 214, .85) 54%, transparent); } .sun .flareSoft { position: absolute; left: var(--sx); top: var(--sy); width: 44vw; height: 10px; transform: translate(-50%, -50%) rotate(var(--tan)); border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(var(--dawn-gold), .30) 50%, transparent); } /* the crepuscular fan — god rays over the break. It lives in .atm, BEHIND the planet: the body occludes it, so light can never bleed onto the surface. Soft-edged sectors + a tight radial mask keep it air, not laser. */ .atm .rays { position: absolute; inset: 0; background: conic-gradient(from 318deg at var(--sx) var(--sy), transparent 0 6deg, rgba(255, 214, 140, .10) 12deg, transparent 18deg 22deg, rgba(255, 214, 140, .06) 27deg, transparent 33deg 38deg, rgba(255, 228, 170, .11) 44deg, transparent 50deg 56deg, rgba(255, 214, 140, .05) 61deg, transparent 67deg 72deg, rgba(255, 214, 140, .08) 77deg, transparent 83deg 360deg); -webkit-mask-image: radial-gradient(circle 560px at var(--sx) var(--sy), #000 16%, transparent 66%); mask-image: radial-gradient(circle 560px at var(--sx) var(--sy), #000 16%, transparent 66%); opacity: .4; } /* the moment of dw-contact — one soft exposure kick as the sun crests, never again */ .flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 1400px 900px at var(--sx) var(--sy), rgba(255, 226, 170, .55), rgba(255, 190, 140, .18) 45%, transparent 75%); opacity: 0; } /* the cinematographer's vignette — the corners recede, the scene focuses */ .vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 92% at 50% 36%, transparent 58%, rgba(2, 3, 8, .38) 100%); } /* --- 7 · grain — kills banding on the big soft gradients ------------------- */ .grain { position: absolute; inset: 0; pointer-events: none; opacity: var(--grain-o); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* --------------------------------------------------------------------------- Content --------------------------------------------------------------------------- */ .in { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; padding: 18px 28px 30px; } .lnav { display: flex; align-items: center; gap: 10px; } .lnav b { font-size: 14.5px; } .lnavActions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; } .orb { width: 22px; height: 22px; border-radius: 50%; flex: none; background: conic-gradient(from 210deg, var(--acc-v), var(--brand), var(--acc-c), var(--acc-r), var(--acc-v)); box-shadow: 0 0 14px rgba(139, 92, 246, .5); } .btn { font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); background: var(--card1); border: 1px solid var(--rule-2); border-radius: 9px; padding: 7px 14px; cursor: pointer; text-decoration: none; display: inline-block; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease; } .btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.26); } .btn.pri { background: linear-gradient(135deg, var(--brand), var(--acc-v)); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 6px 24px -8px rgba(91, 124, 255, .55); } .btn.pri:hover { transform: translateY(-1px); background: linear-gradient(135deg, var(--brand-hi), var(--acc-v)); box-shadow: 0 10px 36px -10px rgba(91, 124, 255, .8), 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 0 30px -6px rgba(255, 214, 140, .25); /* a kiss of the dawn */ } .btn.lg { font-size: 14.5px; padding: 11px 22px; } .btn.qt { background: transparent; border-color: transparent; color: var(--ink-2); } .btn.qt:hover { color: var(--ink); background: rgba(255,255,255,.06); border-color: transparent; } /* --- the hero, floating in the sky --- */ .dhero { text-align: center; max-width: 860px; margin: min(7.5vh, 76px) auto 0; display: flex; flex-direction: column; align-items: center; gap: 14px; } .brandlogo { width: 96px; aspect-ratio: 1; border-radius: 14px; flex: none; background: url("/brand/logo-square-dark.png") center / cover no-repeat; box-shadow: 0 0 0 1px var(--rule), 0 18px 50px -18px rgba(0, 0, 0, .6); } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .22em; color: var(--brand-hi); } h1 { font-size: clamp(46px, 6.4vw, 82px); font-weight: 800; line-height: 1.06; background: linear-gradient(118deg, var(--hero-a) 30%, var(--hero-b) 62%, var(--acc-v) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 220% 100%; animation: dw-heroshift 9s ease-in-out infinite alternate; /* the dawn touches the letters — a whisper, from the light's side */ filter: drop-shadow(0 4px 26px rgba(139, 92, 246, .16)); } h1 span { display: block; } .lead { color: var(--ink-2); font-size: 16.5px; max-width: 58ch; line-height: 1.65; } .ctaRow { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; justify-content: center; } /* --- the proof line: sitting ON the planet, just below the limb --- */ .stats { display: flex; gap: 48px; justify-content: center; flex-wrap: wrap; margin-top: auto; /* pushed down to the body */ padding-top: max(9vh, 64px); /* clears the limb — tuned with the scene */ } .stats > div { text-align: center; } .stats b { display: block; font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--brand-hi), var(--acc-v)); -webkit-background-clip: text; background-clip: text; color: transparent; direction: ltr; /* lit from the sky — the numbers carry a faint cold glow, like the rim */ filter: drop-shadow(0 0 22px rgba(142, 165, 255, .30)); } .stats b .unit { font-size: 16px; } .stats em { font-style: normal; font-size: 12px; color: var(--ink-3); } /* --- the three promises: slabs on the surface, catching the horizon light --- */ .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 980px; width: 100%; margin: 26px auto 6px; } .lfx { position: relative; border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px; background: var(--card1); overflow: hidden; transition: transform .22s ease, border-color .22s ease, background .22s ease; } .lfx:hover { transform: translateY(-2px); border-color: var(--rule-2); background: rgba(255, 255, 255, .07); } /* the catch-light: a 1px horizon reflection on the top edge */ .lfx::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, rgba(var(--dawn-cyan), .0), rgba(var(--dawn-gold), .55) 30%, rgba(var(--dawn-rose), .35) 55%, rgba(var(--dawn-violet), .25) 80%, transparent); } .lfx b { font-size: 14px; display: block; margin-bottom: 4px; } .lfx em { font-style: normal; font-size: 12.5px; color: var(--ink-2); display: block; line-height: 1.55; } @media (max-width: 860px) { .row { grid-template-columns: 1fr; } } /* --- phone: one CTA in the nav, tighter hero, lower horizon (see geom()) --- */ .btn { white-space: nowrap; } @media (max-width: 720px) { .in { padding: 14px 18px 26px; } .lnav b { white-space: nowrap; } .lnavActions .btn.qt:not(#themeBtn), .lnavActions a.btn:not(.pri) { display: none; } .lnavActions .btn.pri { font-size: 12.5px; padding: 7px 12px; } .dhero { margin-top: 5vh; gap: 12px; } .brandlogo { width: 72px; } h1 { font-size: clamp(36px, 10.5vw, 46px); } .lead { font-size: 14.5px; } .stats { gap: 26px; padding-top: max(7vh, 48px); } .stats b { font-size: 28px; } } /* --------------------------------------------------------------------------- ENTRANCE — the sunrise happens to you, once. ~2.9s. 0.0 the sky and the stars dw-breathe in 0.5 the planet's network wakes 0.9 dawn breaks: shell, bloom, rim, sun, flare 1.5 the words rise from the horizon Then: one slow breath every 9s. Reduced motion: the finished scene, still. --------------------------------------------------------------------------- */ /* The words are readable inside ~0.9s; the dawn keeps happening behind them (Codex: never make a returning visitor wait for the sky). */ .stars { opacity: 0; animation: dw-fadeIn 1.2s .10s ease-out both; } .net { opacity: 0; animation: dw-fadeIn 1.5s .35s ease-out both; } .atm b { opacity: 0; animation: dw-fadeIn 1.4s .55s cubic-bezier(.16,1,.3,1) both; } .atm i { opacity: 0; animation: dw-fadeIn 1.6s .60s cubic-bezier(.16,1,.3,1) both, dw-breathe 9s 2.6s ease-in-out infinite; } .rim { opacity: 0; animation: dw-fadeIn 1.3s .65s ease-out both; } .sun .core { opacity: 0; animation: dw-fadeIn 1.1s .70s cubic-bezier(.16,1,.3,1) both; } .sun .flare { opacity: 0; animation: dw-flareGrow 1.4s .80s cubic-bezier(.16,1,.3,1) both; } .sun .flareSoft { opacity: 0; animation: dw-fadeIn 1.5s .85s ease-out both; } .rise1 { animation: dw-riseUp .8s .55s cubic-bezier(.16,1,.3,1) both; } .rise2 { animation: dw-riseUp .8s .65s cubic-bezier(.16,1,.3,1) both; } .rise3 { animation: dw-riseUp .8s .75s cubic-bezier(.16,1,.3,1) both; } .rise3b { animation: dw-riseUp .8s .87s cubic-bezier(.16,1,.3,1) both; } .rise4 { animation: dw-riseUp .8s .95s cubic-bezier(.16,1,.3,1) both; } .rise5 { animation: dw-riseUp .8s 1.10s cubic-bezier(.16,1,.3,1) both; } .rise6 { animation: dw-riseUp .8s 1.35s cubic-bezier(.16,1,.3,1) both; } .rise7 { animation: dw-riseUp .8s 1.50s cubic-bezier(.16,1,.3,1) both; } /* the rays dw-breathe on their own scale (their resting opacity is not 1) */ .atm .rays { opacity: 0; animation: dw-raysIn 1.9s .95s ease-out both, dw-raysBreathe 11s 3.2s ease-in-out infinite; } /* the dw-contact kick — fires once, right as the core crests */ .flash { animation: dw-contact 1.5s .72s cubic-bezier(.3, 0, .4, 1) both; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; } .stars, .net, .atm b, .atm i, .rim, .sun .core, .sun .flare, .sun .flareSoft { opacity: 1; } .atm .rays { opacity: .4; } .flash { opacity: 0; } } } /* ===== v2 · dawn: the header over the sky, the sunrise, the LEX skin, the new dawn CTA ===== */ .hdr{position:fixed;left:0;right:0;top:0;transition:background .3s ease,border-color .3s ease} .page{padding-top:68px} #home{padding-top:0} .hdr.dark{background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none} .hdr.dark .brand,.hdr.dark .nav>li>a,.hdr.dark .nav>li>button,.hdr.dark .signin,.hdr.dark .lang{color:#fff} .hdr.dark .nav>li>a:hover,.hdr.dark .nav>li>button:hover,.hdr.dark .nav>li.on>a{background:rgba(255,255,255,.1);color:#fff} .hdr.dark .lang{border-color:rgba(255,255,255,.28)} .hdr.dark .brand path[fill="#0b2846"]{fill:#fff} .hdr.dark .btn.sm{background:#fff;color:var(--ink);box-shadow:none} .dawn .in{padding-top:92px} .dawn .btn{height:auto} .dawn .dhero .lead{color:#a9b2c9} .sunrise{height:240px;background:linear-gradient(180deg,#0a0e1b 0%,#151f45 18%,#4a5d9e 42%,#b9c3e3 68%,#f3f4f8 100%)} .morning{background:var(--silver);padding:8px 0 104px} .morning .wrap{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center} .morning .h2{margin-bottom:14px} /* the LEX skin */ .fr{background:#eef2fb;border-color:#e2e8f5} .fr-body{grid-template-columns:118px 1fr} .rail{margin:0;border-radius:0;padding:12px 9px;background:#0f1d3d;color:#fff;box-shadow:none;gap:3px} .rail .lj{display:block;text-align:center;font-size:17px;font-weight:700;letter-spacing:.06em;padding:2px 0 0;line-height:1.1} .rail .lj::after{content:"LEGAL INTELLIGENCE";display:block;font-size:5.5px;letter-spacing:.16em;font-weight:500;opacity:.75;margin:2px 0 10px} .rail .rs{height:22px;border-radius:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:9.5px;color:rgba(255,255,255,.6);display:flex;align-items:center;padding:0 8px;margin-bottom:6px} .rail .rb{height:24px;border-radius:8px;background:#1f5eff;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-bottom:8px} .ri{color:rgba(255,255,255,.78);border-radius:8px} .ri::before{background:rgba(255,255,255,.35)} .ri.on{background:#1f5eff;color:#fff;box-shadow:none} .ri.on::before{background:#fff} .rail .me{color:rgba(255,255,255,.8);border-top:1px solid rgba(255,255,255,.12);padding-top:8px} .gcard{background:#fff;border:1px solid #e3e8f4;box-shadow:0 8px 20px -14px rgba(15,29,61,.3);border-radius:12px} .gcard h6 .bd{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:50%;background:#e11d48;color:#fff;font-size:10px;font-weight:700} .gcard h6 .bd.vio{background:#7c3aed} .gcard .row b{font-weight:600;color:var(--ink)} .late{color:#dc2626;font-weight:600} .amber{color:#d97706;font-weight:600} .gcard a{display:block;margin-top:6px;font-size:10.5px;color:#1f5eff;font-weight:600} .gcard .row.c1,.gcard .row.c2,.gcard .row.c3,.gcard .row.c4{border-right:3px solid #7c3aed;padding-right:6px} .gcard .row.c2{border-right-color:#1f5eff}.gcard .row.c3{border-right-color:#16a34a}.gcard .row.c4{border-right-color:#ea580c} .tl div{display:grid;grid-template-columns:34px 1fr;gap:1px 8px;padding:5px 0;border-top:1px solid #eef1f7;font-size:11px} .tl div:first-child{border-top:0} .tl i{font-style:normal;color:#1f5eff;font-weight:600;grid-row:span 2} .tl b{font-weight:600}.tl span{color:var(--ink3);font-size:10.5px} .hg{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .hg h5{font-size:15px;font-weight:700} .hg span{font-size:10.5px;color:var(--ink3)} .qa{display:flex;gap:10px;padding-top:4px} .qa i{font-style:normal;font-size:10.5px;color:var(--ink2);padding-right:13px;position:relative;white-space:nowrap} .qa i::before{content:"";position:absolute;right:0;top:4px;width:8px;height:8px;border:1.5px solid var(--ink2);border-radius:2px} .lexbox{background:linear-gradient(135deg,#f6f8fe,#e9eefb);border:1px solid #c9d6fb;border-radius:14px;padding:14px 16px;box-shadow:0 12px 28px -18px rgba(31,94,255,.35)} .lexbox h6{font-size:15px;font-weight:700;text-align:center;margin-bottom:10px} .lexin{display:flex;align-items:center;gap:8px;height:38px;border-radius:12px;background:#fff;border:1px solid #dbe3f5;padding:0 8px 0 6px} .lexin .k{width:28px;height:28px;border-radius:50%;background:#1f5eff;flex:none} .lexin .ph2{flex:1;color:var(--ink3);font-size:11px} .lexin .scope{font-size:10.5px;color:#1f5eff;border:1px solid #dbe3f5;border-radius:7px;padding:2px 8px;white-space:nowrap} .composer{background:#fff;border-color:#dbe3f5} .composer .k{background:#1f5eff} .pill{background:#fff;border-color:#e3e8f4;box-shadow:none} .tabs-mini{background:transparent;border-bottom:1px solid #e3e8f4;border-radius:0;padding:0;gap:0;align-self:stretch} .tabs-mini i{border-radius:0;padding:4px 10px 6px;color:var(--ink3)} .tabs-mini i.on{background:transparent;box-shadow:none;color:#1f5eff;border-bottom:2px solid #1f5eff} .steps7{display:flex;align-items:flex-start;justify-content:space-between;gap:4px;padding:8px 6px;background:#fff;border:1px solid #e3e8f4;border-radius:12px} .steps7 i{font-style:normal;font-size:10px;color:var(--ink3);text-align:center;flex:1;position:relative;padding:4px 2px;border-radius:8px;line-height:1.25} .steps7 i b{display:block;font-weight:500;font-size:9.5px;color:var(--ink2)} .steps7 i em{display:block;font-style:normal;font-size:8.5px;opacity:.85} .steps7 i.on{background:#1f5eff;color:#fff}.steps7 i.on b,.steps7 i.on em{color:#fff} .steps7 i.done::after{content:"✓";position:absolute;top:-4px;left:4px;width:12px;height:12px;border-radius:50%;background:#16a34a;color:#fff;font-size:8px;display:grid;place-items:center} .gcard.st .bar{height:5px;border-radius:5px;background:#e8edf8;margin:6px 0 8px;overflow:hidden} .gcard.st .bar i{display:block;height:100%;background:#1f5eff;border-radius:5px} .gcard .row.ok b::before{content:"✓ ";color:#16a34a} .gcard .foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid #eef1f7} .gcard .foot i{font-style:normal;padding:4px 9px;border-radius:7px;background:#e8edf8;color:var(--ink3);font-size:10px} .seg2{display:flex;gap:6px} .seg2 i{font-style:normal;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:8px;background:#fff;border:1px solid #e3e8f4;font-size:10.5px;color:var(--ink2)} .seg2 i.on{background:#1f5eff;color:#fff;border-color:#1f5eff} .dot{width:6px;height:6px;border-radius:50%;display:inline-block}.dot.red{background:#dc2626}.dot.blue{background:#1f5eff} .tbl{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid #e3e8f4;border-radius:10px;overflow:hidden;font-size:10px} .tbl th{font-weight:500;color:var(--ink3);text-align:right;padding:6px 8px;background:#f5f7fc;border-bottom:1px solid #e3e8f4} .tbl td{padding:6px 8px;border-bottom:1px solid #eef1f7;vertical-align:top;color:var(--ink2)} .tbl td:first-child{font-weight:600;color:var(--ink);border-right:3px solid #1f5eff} .tbl td.c2{border-right-color:#16a34a}.tbl td.c3{border-right-color:#dc2626}.tbl td.c4{border-right-color:#ea580c} .tbl tr.late td{background:#fff5f5} .stp{display:inline-block;padding:1px 7px;border-radius:6px;background:#e8efff;color:#1f5eff;font-weight:600;font-size:9.5px} .stp.g{background:#e6f6ee;color:#16a34a}.stp.v{background:#efe9ff;color:#7c3aed} .src{background:#e8efff;color:#1f5eff} .stg.here{border-color:#1f5eff}.stg.here .tag,.stg .go,.side .btns i{background:#1f5eff} .act b{color:#16a34a} .bub.user{background:#fff;border-color:#e3e8f4} .ans{background:#fff;border-color:#e3e8f4} .paper{border-color:#e3e8f4} /* the new dawn CTA */ .cta2{position:relative;overflow:hidden;background:linear-gradient(180deg,#0a0e1b,#101731 60%,#16204a);color:#fff;padding:120px 0 160px;text-align:center} .cta2::before{content:"";position:absolute;left:50%;bottom:-1560px;width:3200px;height:3200px;border-radius:50%;transform:translateX(-50%);background:#0a0e1b;box-shadow:0 0 0 1px rgba(140,165,255,.35),0 -6px 40px 6px rgba(140,165,255,.16),0 -30px 120px 20px rgba(255,214,140,.10)} .cta2::after{content:"";position:absolute;left:64%;bottom:150px;width:240px;height:130px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,247,226,.95),rgba(255,214,140,.55) 25%,rgba(244,114,182,.18) 55%,transparent 72%);filter:blur(6px)} .cta2 .wrap{position:relative;z-index:1} .cta2 .h2{color:#fff;margin-bottom:12px} .cta2 .lead{color:#c4cde0;margin:0 auto 30px} .cta2 .ctas{justify-content:center} .cta2 .btn.ghost{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)} @media (max-width:1100px){.morning .wrap{grid-template-columns:1fr}} .dawn .in{color:#eaeef9;min-height:min(100vh,960px)} .dawn .dstage{min-height:min(100vh,960px)} .dawn .row{margin-top:auto;padding-top:max(9vh,64px)} .dawn .in{padding-top:72px} .dawn .dhero{margin-top:min(3vh,28px);gap:12px} .dawn .brandlogo{width:72px} /* ============================================================================= v3 · THE SUNRISE — the whole site lives inside one morning. --k 0→1 : ink turns from night-light to day-ink (sharp, around sunrise) --pday 0→1 : the sky becomes day (stars die, the planet lightens) --pdawn : the rose/gold band, a bell around the sunrise moment All three are set by JS from scroll (home, product) or fixed per page. ============================================================================= */ body{--k:0;--pday:0;--pdawn:0; --ink:color-mix(in oklab,#0b2846 calc(var(--k)*100%),#eaeef9); --ink2:color-mix(in oklab,#3a5b80 calc(var(--k)*100%),#aeb7cc); --ink3:color-mix(in oklab,#6b84a3 calc(var(--k)*100%),#8390ad); --line:color-mix(in oklab,rgba(33,42,74,.14) calc(var(--k)*100%),rgba(255,255,255,.10)); --line2:color-mix(in oklab,rgba(33,42,74,.26) calc(var(--k)*100%),rgba(255,255,255,.2)); --card:color-mix(in oklab,rgba(255,255,255,.76) calc(var(--k)*100%),rgba(255,255,255,.055)); --card2:color-mix(in oklab,rgba(255,255,255,.9) calc(var(--k)*100%),rgba(255,255,255,.09)); --hero-a:color-mix(in oklab,#0b2846 calc(var(--k)*100%),#ffffff); --hero-b:color-mix(in oklab,#2348b8 calc(var(--k)*100%),#9fb4ff); --cobalt:color-mix(in oklab,#2f5fe0 calc(var(--k)*100%),#9fb4ff); --paper:transparent;--silver:transparent;--hair:transparent; background:#03040a;color:var(--ink)} /* the fixed sky — the scene from the welcome page, now BEHIND everything */ .skyfix{position:fixed;inset:0;z-index:0;pointer-events:none} .skyfix .dstage{min-height:100vh;height:100%} .dawn{--body-1:color-mix(in oklab,#c3d2ea calc(var(--pday)*100%),#10162a);--body-2:color-mix(in oklab,#9fb4d2 calc(var(--pday)*100%),#080b16);--paper:color-mix(in oklab,#dbe6f5 calc(var(--pday)*100%),#0a0e1b);--bg:#03040a} .dawn .skydawn{position:absolute;inset:0;background:linear-gradient(180deg,#0b1020 0%,#2b2652 34%,#7a4670 62%,#e0906f 84%,#ffd68c 100%);opacity:var(--pdawn)} .dawn .skyday{position:absolute;inset:0;background:linear-gradient(180deg,#9fbde8 0%,#cfe0f6 40%,#eef3fb 70%,#fbf4e6 100%);opacity:var(--pday)} .dawn .sunday{position:absolute;inset:0;background:radial-gradient(circle 260px at var(--sx) var(--sy),rgba(255,251,235,.98),rgba(255,236,190,.75) 30%,rgba(255,214,140,.28) 60%,transparent 100%),radial-gradient(circle 900px at var(--sx) var(--sy),rgba(255,236,200,.35),transparent 70%);opacity:var(--pday)} .dawn .sun .flare,.dawn .sun .flareSoft{top:var(--ly)} .dawn .sun .core{transform:translate(-50%,-50%) scale(calc(1 + var(--pday)*5))} .dawn.settled .stars,.dawn.settled .net,.dawn.settled .atm b,.dawn.settled .atm i,.dawn.settled .rim,.dawn.settled .sun .core,.dawn.settled .sun .flare,.dawn.settled .sun .flareSoft,.dawn.settled .atm .rays,.dawn.settled .flash{animation:none!important} .dawn.settled .stars,.dawn.settled .net{opacity:calc(1 - var(--pday))} .dawn.settled .atm b,.dawn.settled .atm i,.dawn.settled .rim,.dawn.settled .sun .core,.dawn.settled .sun .flare,.dawn.settled .sun .flareSoft{opacity:1} .dawn.settled .atm .rays{opacity:calc(.4 - var(--pday)*.3)} .dawn.settled .flash{opacity:0} .dawn .vig{opacity:calc(1 - var(--pday))} /* content floats over the sky */ .hdr,main,footer,.mock{position:relative;z-index:1} .hdr{position:fixed;z-index:60;background:color-mix(in oklab,rgba(255,255,255,.72) calc(var(--k)*100%),rgba(3,4,10,.28));border-color:var(--line)} .hdr .brand path[fill="#0b2846"]{fill:var(--ink)} .hdr .lang{border-color:var(--line2)} .hdr .nav>li>a:hover,.hdr .nav>li>button:hover,.hdr .nav>li.on>a{background:var(--card)} .mega{background:var(--card2);border-color:var(--line);color:var(--ink);backdrop-filter:blur(18px)} .mega a:hover{background:var(--card)} .mega i{background:var(--card);color:var(--cobalt)} .page{padding-top:0} main{min-height:100vh} /* ---- the sun is the button ---- */ .btn{background:linear-gradient(135deg,#fffaf0,#ffe6b3 45%,#ffd68c);color:#1a1230;box-shadow:0 0 0 1px rgba(255,214,140,.55),0 0 36px rgba(255,214,140,.35),0 10px 26px -10px rgba(244,114,182,.55);transition:transform .15s ease,box-shadow .2s ease} .btn:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,214,140,.8),0 0 48px rgba(255,214,140,.5),0 14px 30px -10px rgba(244,114,182,.6)} .btn.ghost,.btn.night{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)} .btn.sm{box-shadow:0 0 0 1px rgba(255,214,140,.5),0 0 22px rgba(255,214,140,.3)} .link{color:var(--cobalt)} /* ---- the moments ---- */ .mo{position:relative;padding:112px 0 120px} .mo .wrap{position:relative} .hz{position:absolute;left:0;right:0;top:0;height:96px;pointer-events:none} .hz svg{width:100%;height:100%;display:block} .tm{display:flex;align-items:baseline;gap:14px;margin-bottom:18px} .tm svg{width:26px;height:18px;align-self:center;overflow:visible} .tm svg circle{fill:#ffd68c} .tm svg path{stroke:rgba(255,214,140,.55);stroke-width:1;fill:none} .tm b{font-size:16px;font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums;background:linear-gradient(135deg,#ffd68c,#f472b6 60%,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent} .tm span{font-size:14.5px;color:var(--ink3)} .h2.sky,.h1.sky{background:linear-gradient(118deg,var(--hero-a) 30%,var(--hero-b) 62%,#8b5cf6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em} .mo .lead{color:var(--ink2)} .mo .txt li::before{background:linear-gradient(90deg,#ffd68c,#f472b6)} .mo .txt li{color:var(--ink2)} .duet{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center} .duet.rev>.txt{order:2} /* every card is glass catching the horizon */ .slab,.tile,.person,.quote,.post,.step,.plan,.shield div,.facts-card,.srcc-site{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -40px rgba(0,0,0,.6);backdrop-filter:blur(10px)} .slab::before,.tile::before,.person::before,.quote::before,.post::before,.step::before,.plan::before,.shield div::before,.facts-card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,rgba(34,211,238,0),rgba(255,214,140,.7) 30%,rgba(244,114,182,.5) 55%,rgba(139,92,246,.35) 80%,transparent);z-index:1} .step::before{counter-increment:none;content:"";width:auto;height:1px;top:0;left:0;border-radius:0;background:linear-gradient(90deg,rgba(34,211,238,0),rgba(255,214,140,.7) 30%,rgba(244,114,182,.5) 55%,rgba(139,92,246,.35) 80%,transparent);color:transparent} .slab{padding:22px 24px} .slab b{display:block;font-size:17px;font-weight:600;line-height:1.3;margin-bottom:6px} .slab p,.slab em{display:block;font-style:normal;font-size:14.5px;color:var(--ink2);line-height:1.5} .slabs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .slabs.four{grid-template-columns:repeat(4,1fr)} .tile .shot{background:transparent;padding:22px 22px 0} .tile .body{background:transparent} .tile p,.step p,.person p,.post p,.quote .who,.plan .for,.plan ul,.shield p,.faq .a,.cap .facts span,.txt li{color:var(--ink2)} .person .ph-img{background:linear-gradient(155deg,rgba(255,214,140,.5),rgba(139,92,246,.45));color:#fff} .quote .who i{background:linear-gradient(155deg,rgba(255,214,140,.5),rgba(244,114,182,.4))} .post .img{background:linear-gradient(135deg,rgba(255,214,140,.35),rgba(139,92,246,.35))} .post .img.b{background:linear-gradient(135deg,#0b1020,#2b2652)} .post .img.c{background:linear-gradient(135deg,rgba(34,211,238,.3),rgba(159,180,255,.3))} .lnk{border-color:var(--line2);color:var(--ink)}.lnk:hover{background:var(--card)} .ftr{background:transparent;border-color:var(--line)} .ftr a,.ftr .about p,.ftr .legal{color:var(--ink2)} .soc a{border-color:var(--line2);color:var(--ink2)} .phead{background:transparent;border-color:var(--line);padding-top:150px} .subnav{top:68px;background:color-mix(in oklab,rgba(255,255,255,.8) calc(var(--k)*100%),rgba(3,4,10,.5));border-color:var(--line)} .subnav a{color:var(--ink2)}.subnav a:hover{background:var(--card);color:var(--ink)} .sec,.sec.silver,.sec.night,.cap,.morning,.cta,.cta2,.sunrise{background:transparent} .cap{border-color:var(--line)} .cap .facts div{border-color:var(--line2)} .faq details{border-color:var(--line)} .faq summary::after{color:var(--ink3)} .subs th,.subs td{border-color:var(--line)} .subs th{color:var(--ink2)} .form-grid input,.form-grid textarea{background:var(--card2);border-color:var(--line2);color:var(--ink)} .form-grid label{color:var(--ink2)} .facts-card dt{color:var(--ink3)} .timeline div{border-color:var(--line)}.timeline b{color:var(--ink2)} .plan.hi{border-color:rgba(255,214,140,.6);box-shadow:0 0 60px -20px rgba(255,214,140,.45)} .plan li::before{color:#ffd68c} .plan .per,.small{color:var(--ink3)} .people{grid-template-columns:repeat(3,1fr)} .mock{background:rgba(11,16,32,.9)} /* the hero as the first moment */ .dawn-hero{min-height:min(100vh,960px);display:flex;flex-direction:column;padding-top:128px;color:#eaeef9} .dawn-hero .dhero{text-align:center;max-width:860px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px} .dawn-hero .brandlogo{width:72px;aspect-ratio:1;border-radius:14px;background:url("/brand/logo-square-dark.png") center/cover no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 50px -18px rgba(0,0,0,.6)} .dawn-hero h1{font-size:clamp(46px,6.4vw,82px);font-weight:800;line-height:1.06;letter-spacing:-.02em;background:linear-gradient(118deg,#fff 30%,#9fb4ff 62%,#8b5cf6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 26px rgba(139,92,246,.16))} .dawn-hero h1 span{display:block} .dawn-hero .lead{color:#aeb7cc;font-size:17.5px;max-width:58ch;text-align:center} .dawn-hero .ctaRow{display:flex;gap:10px;margin-top:10px;justify-content:center} .dawn-hero .slabs{margin-top:auto;padding-top:max(9vh,64px);padding-bottom:28px;max-width:980px;width:100%;margin-left:auto;margin-right:auto} .dawn-hero .slab{padding:16px 18px;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#eaeef9} .dawn-hero .slab b{font-size:14px;margin-bottom:3px}.dawn-hero .slab em{font-size:12.5px;color:#aeb7cc} @keyframes dw-riseUp2{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} .dawn-hero .rise1{animation:dw-riseUp2 .8s .55s cubic-bezier(.16,1,.3,1) both}.dawn-hero .rise3{animation:dw-riseUp2 .8s .75s cubic-bezier(.16,1,.3,1) both}.dawn-hero .rise3b{animation:dw-riseUp2 .8s .87s cubic-bezier(.16,1,.3,1) both}.dawn-hero .rise4{animation:dw-riseUp2 .8s .95s cubic-bezier(.16,1,.3,1) both}.dawn-hero .rise5{animation:dw-riseUp2 .8s 1.1s cubic-bezier(.16,1,.3,1) both}.dawn-hero .rise7{animation:dw-riseUp2 .8s 1.5s cubic-bezier(.16,1,.3,1) both} /* the product wakes up with the page: night frames */ .fr{box-shadow:0 40px 90px -40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06)} .fr.night{background:#0b1630;border-color:rgba(140,165,255,.16);color:#e6ebf7} .fr.night .fr-bar{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)} .fr.night .fr-bar .url{background:rgba(255,255,255,.08);color:#aeb7cc} .fr.night .rail{background:#071028} .fr.night .gcard,.fr.night .bub.user,.fr.night .act,.fr.night .ans,.fr.night .srcc,.fr.night .steps7,.fr.night .tbl,.fr.night .lexbox,.fr.night .lexin,.fr.night .composer,.fr.night .calc,.fr.night .mail,.fr.night .cal .d{background:#13244a;border-color:rgba(140,165,255,.16);color:#e6ebf7;box-shadow:none} .fr.night .gcard p,.fr.night .gcard .row span,.fr.night .tl span,.fr.night .hg span,.fr.night .jhead span,.fr.night .think,.fr.night .act i,.fr.night .composer span,.fr.night .srcc em,.fr.night .steps7 i,.fr.night .steps7 i b,.fr.night .tbl td,.fr.night .tbl th,.fr.night .gcard .foot i{color:#aeb7cc} .fr.night .gcard .row b,.fr.night .tl b,.fr.night .hg h5,.fr.night .jhead h5,.fr.night .sent,.fr.night .gcard h6,.fr.night .srcc b,.fr.night .tbl td:first-child,.fr.night .bub.lex,.fr.night .ans{color:#eaeef9} .fr.night .src{background:rgba(159,180,255,.18);color:#c7d2ff} .fr.night .steps7 i.on{background:#ffd68c;color:#1a1230}.fr.night .steps7 i.on b,.fr.night .steps7 i.on em{color:#1a1230} .fr.night .gcard.st .bar{background:rgba(255,255,255,.1)}.fr.night .gcard.st .bar i{background:#ffd68c} .fr.night .tabs-mini{border-color:rgba(255,255,255,.1)}.fr.night .tabs-mini i.on{color:#ffd68c;border-color:#ffd68c} .fr.night .ri.on{background:rgba(255,214,140,.16);color:#ffd68c}.fr.night .ri.on::before{background:#ffd68c} .fr.night .rb{background:rgba(255,214,140,.9);color:#1a1230} .fr.night .act b{color:#7ee2c5} .fr.night .tbl tr.late td{background:rgba(220,38,38,.12)} .fr.night .stp{background:rgba(159,180,255,.16);color:#c7d2ff} .fr.night .k{background:#ffd68c!important} /* the reading frame */ .read{display:grid;grid-template-columns:1fr 1.3fr;gap:10px} .docs div{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:8px;background:#13244a;margin-bottom:5px;font-size:10.5px} .docs div i{width:16px;height:20px;border-radius:2px;background:#e6ebf7;flex:none;opacity:.9} .docs div b{font-weight:500;color:#eaeef9;flex:1} .docs div em{font-style:normal;color:#7ee2c5;font-size:9.5px} .facts{display:grid;gap:5px} .fact{padding:7px 9px;border-radius:9px;background:#13244a;border:1px solid rgba(140,165,255,.14);font-size:10.5px;line-height:1.4;color:#eaeef9} .fact .src{margin-right:4px} .fact.warn{border-color:rgba(255,214,140,.5)} .fact.warn::before{content:"סתירה · ";color:#ffd68c;font-weight:600} @media (max-width:1100px){.duet{grid-template-columns:1fr}.duet.rev>.txt{order:0}.slabs,.slabs.four{grid-template-columns:1fr 1fr}} @media (max-width:760px){.slabs,.slabs.four{grid-template-columns:1fr}.dawn-hero{padding-top:100px}} /* legibility through the flip: a halo that is dark under light text and light under dark text */ .mo .lead,.mo .txt li,.mo .slab b,.mo .slab p,.mo .slab em,.tile .body,.person,.quote,.post .body,.step,.tm span{text-shadow:0 1px 14px color-mix(in oklab,rgba(255,255,255,.75) calc(var(--k)*100%),rgba(3,4,10,.7))} .h2.sky{filter:drop-shadow(0 2px 16px color-mix(in oklab,rgba(255,255,255,.7) calc(var(--k)*100%),rgba(3,4,10,.55)))} /* ===== v4 · ORBIT: the real sunrise — a WebGL Earth from low orbit behind the whole site ===== */ #gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:3} .skyfix .dstage{visibility:hidden} /* the CSS dawn is only the no-WebGL fallback */ body.gl-failed .skyfix .dstage{visibility:visible} body.gl-failed #gl{display:none} .hz{display:none} /* the drawn horizon dividers belong to the CSS sky, not the real planet */ /* the photograph is busier than a gradient: text sits on a soft scrim */ .mo .wrap::before{content:"";position:absolute;inset:-40px -48px;border-radius:32px;z-index:-1;pointer-events:none; background:color-mix(in oklab, rgba(255,255,255,.34) calc(var(--k)*100%), rgba(3,6,16,.42)); -webkit-mask:radial-gradient(70% 70% at 50% 50%,#000 40%,transparent 100%);mask:radial-gradient(70% 70% at 50% 50%,#000 40%,transparent 100%)} .mo .wrap{isolation:isolate} /* nothing may widen the page: the scrims stay inside their sections, the root never scrolls sideways */ html{overflow-x:hidden} .mo,.dawn-hero,.phead,.sec,.cap,.cta2,.ftr{overflow:hidden} .skyfix,#gl{max-width:100vw} .dawn-hero .dhero{position:relative} .dawn-hero .dhero::before{content:"";position:absolute;inset:-60px -80px;z-index:-1;background:radial-gradient(60% 60% at 50% 45%,rgba(3,6,16,.42),transparent 100%);pointer-events:none} /* production */ .ph{background:none!important;cursor:auto} .mock{display:none} /* the CSS fallback opens in full night too: its sun and bloom arrive with the scroll */ .dawn.settled .sun .core,.dawn.settled .sun .flare,.dawn.settled .sun .flareSoft,.dawn.settled .atm i,.dawn.settled .atm .rays{opacity:clamp(0, calc(var(--pdawn) * 2.2), 1)}