/* ═══════════════════════════════════════════════════════════════════ igotisekai — design system One accent per product, one house voice. Dark by default because the products are things you open at night: a queue, a lost cat, a place you meant to remember. ═══════════════════════════════════════════════════════════════════ */ :root{ /* House */ --ink:#08070F; --ink-2:#0E0C1A; --surface:#15122A; --surface-2:#1D1936; --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16); --text:#F4F2FF; --text-2:#B7B1D4; --text-3:#8F87AD; /* lifted from #7E789C: that failed WCAG AA (4.06) on cards */ --brand:#6D5BF5; --brand-2:#9C7BFF; --brand-glow:rgba(109,91,245,.35); /* Products */ /* Each product's accent is taken from the app itself. */ --pugmark:#F0997B; /* Pugmark's coral, over its indigo #26215C */ --pugmark-deep:#26215C; --pinzaa:#E07E1A; /* Pinzaa's burnt orange, sampled from the app */ --pinzaa-deep:#C86800; --nabza:#8B6EFF; /* lifted from #7C5CF7: 4.11 as small text on cards */ --r-sm:12px; --r-md:18px; --r-lg:28px; --r-xl:40px; --shadow:0 24px 60px -20px rgba(0,0,0,.7); --ease:cubic-bezier(.22,.61,.36,1); --spring:cubic-bezier(.34,1.4,.5,1); --pad:clamp(20px,5vw,64px); --max:1180px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--ink); color:var(--text); font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* ── Type ───────────────────────────────────────────────────────── */ .display{ font-family:"Bricolage Grotesque","Inter",sans-serif; font-weight:700; letter-spacing:-.035em; line-height:1.02; } h1.display{font-size:clamp(2.6rem,7.5vw,5.2rem)} h2.display{font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.06} h3.display{font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.15} .eyebrow{ font-size:.72rem;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:var(--text-3); display:inline-flex;align-items:center;gap:10px; } .eyebrow::before{ content:"";width:26px;height:1px;background:var(--line-strong); } .lede{font-size:clamp(1.02rem,1.6vw,1.22rem);color:var(--text-2);max-width:56ch} .muted{color:var(--text-3)} /* ── Layout ─────────────────────────────────────────────────────── */ .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)} section{position:relative;padding-block:clamp(72px,11vw,140px)} .stack{display:flex;flex-direction:column;gap:18px} /* ── Nav ────────────────────────────────────────────────────────── */ .nav{ position:fixed;inset:0 0 auto 0;z-index:80; display:flex;align-items:center;justify-content:space-between; gap:18px;padding:16px var(--pad); transition:background .3s var(--ease),backdrop-filter .3s var(--ease), border-color .3s var(--ease); border-bottom:1px solid transparent; } .nav.scrolled{ background:rgba(8,7,15,.72); backdrop-filter:blur(18px) saturate(140%); border-bottom-color:var(--line); } .brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:-.02em} .brand-mark{ width:32px;height:32px;border-radius:9px;flex-shrink:0; background:linear-gradient(145deg,var(--brand),#4C1D95); display:grid;place-items:center; box-shadow:0 6px 18px -6px var(--brand-glow); } .nav-links{display:flex;align-items:center;gap:28px} .nav-links a{font-size:.92rem;color:var(--text-2);transition:color .2s} .nav-links a:hover{color:var(--text)} .nav-toggle{display:none;background:none;border:none;color:var(--text);padding:8px;cursor:pointer} @media(max-width:820px){ .nav-links{ position:fixed;inset:64px 0 auto 0; flex-direction:column;align-items:stretch;gap:0; background:rgba(8,7,15,.96);backdrop-filter:blur(20px); border-bottom:1px solid var(--line); padding:8px var(--pad) 20px; transform:translateY(-120%);transition:transform .35s var(--ease); } .nav-links.open{transform:translateY(0)} .nav-links a{padding:14px 0;border-top:1px solid var(--line);font-size:1rem} .nav-links .btn{margin-top:14px;justify-content:center} .nav-toggle{display:block} } /* ── Buttons ────────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:13px 22px;border-radius:999px;border:1px solid transparent; font-size:.94rem;font-weight:650;cursor:pointer; transition:transform .25s var(--spring),box-shadow .25s var(--ease), background .2s,border-color .2s,color .2s; font-family:inherit; } .btn-primary{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff;box-shadow:0 12px 30px -10px var(--brand-glow); } .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px var(--brand-glow)} .btn-ghost{border-color:var(--line-strong);color:var(--text)} .btn-ghost:hover{background:rgba(255,255,255,.05);border-color:var(--text-3)} .btn svg{width:17px;height:17px} /* ── Reveal on scroll ───────────────────────────────────────────── */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s} .reveal[data-d="4"]{transition-delay:.32s} /* ── Hero ───────────────────────────────────────────────────────── */ .hero{ min-height:100svh;display:flex;align-items:center; padding-top:110px;padding-bottom:70px;overflow:hidden; } .hero-grid{display:grid;gap:clamp(36px,6vw,72px);align-items:center} @media(min-width:960px){.hero-grid{grid-template-columns:1.08fr .92fr}} .hero h1{margin:18px 0 22px} .hero h1 em{ font-style:normal; background:linear-gradient(100deg,var(--brand-2),#5EEAD4 55%,var(--pugmark)); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px} .hero-note{margin-top:26px;font-size:.86rem;color:var(--text-3)} /* Ambient light behind the hero */ .aura{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.5;z-index:0} .aura-1{width:min(56vw,620px);aspect-ratio:1;background:var(--brand);top:-14%;right:-12%} .aura-2{width:min(40vw,430px);aspect-ratio:1;background:#12B3A8;bottom:-18%;left:-10%;opacity:.28} .hero .wrap{position:relative;z-index:1} /* ── Flip stats ─────────────────────────────────────────────────── */ .stats{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)} @media(min-width:620px){.stats{grid-template-columns:repeat(4,1fr)}} .stat{ position:relative;height:132px;perspective:1000px; } .stat-inner{ position:absolute;inset:0; transition:transform .9s var(--ease); transform-style:preserve-3d; } .stat.flipped .stat-inner{transform:rotateX(180deg)} .stat-face{ position:absolute;inset:0; display:flex;flex-direction:column;justify-content:center;gap:6px; padding:20px;border-radius:var(--r-md); background:var(--surface);border:1px solid var(--line); backface-visibility:hidden;-webkit-backface-visibility:hidden; } .stat-back{transform:rotateX(180deg);background:var(--surface-2)} .stat-k{ font-family:"Bricolage Grotesque",sans-serif; font-size:clamp(1.6rem,3vw,2.1rem);font-weight:700;letter-spacing:-.03em; line-height:1; } .stat-l{font-size:.82rem;color:var(--text-3);line-height:1.35} /* ── Product cards ──────────────────────────────────────────────── */ .products{display:grid;gap:20px;margin-top:52px} @media(min-width:900px){.products{grid-template-columns:repeat(3,1fr)}} .product{ position:relative;display:flex;flex-direction:column; padding:30px 26px 26px;border-radius:var(--r-lg); background: radial-gradient(120% 90% at 50% 0%, var(--tint) 0%, transparent 62%), var(--surface); border:1px solid var(--line); overflow:hidden;isolation:isolate; transition:transform .4s var(--ease),border-color .3s; } .product:hover{transform:translateY(-6px);border-color:var(--accent)} .product::after{ content:"";position:absolute;inset:auto 0 0 0;height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:0;transition:opacity .35s; } .product:hover::after{opacity:1} .product-mark{ width:60px;height:60px;border-radius:17px;display:grid;place-items:center; background:color-mix(in srgb,var(--accent) 16%,transparent); border:1px solid color-mix(in srgb,var(--accent) 34%,transparent); margin-bottom:20px; } .product h3{margin-bottom:8px} .product p{color:var(--text-2);font-size:.95rem;flex:1} .product-tags{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 20px} .tag{ font-size:.72rem;font-weight:600;letter-spacing:.02em; padding:5px 11px;border-radius:999px; background:rgba(255,255,255,.05);border:1px solid var(--line); color:var(--text-2); } .product-go{ display:inline-flex;align-items:center;gap:8px; font-size:.9rem;font-weight:650;color:var(--accent); } .product-go svg{transition:transform .3s var(--spring)} .product:hover .product-go svg{transform:translateX(4px)} /* ── Split feature rows ─────────────────────────────────────────── */ .row{display:grid;gap:clamp(28px,5vw,64px);align-items:center} @media(min-width:900px){ .row{grid-template-columns:1fr 1fr} .row.flip .row-media{order:-1} } .row + .row{margin-top:clamp(56px,8vw,110px)} .row-media{ border-radius:var(--r-lg);border:1px solid var(--line); background:var(--surface);overflow:hidden; aspect-ratio:4/3;display:grid;place-items:center; position:relative; } /* ── Steps / guide ──────────────────────────────────────────────── */ .steps{counter-reset:s;display:grid;gap:16px;margin-top:44px} @media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}} .step{ position:relative;padding:28px 24px 24px; border-radius:var(--r-md);background:var(--surface); border:1px solid var(--line); } .step::before{ counter-increment:s;content:counter(s,decimal-leading-zero); font-family:"Bricolage Grotesque",sans-serif; font-size:.8rem;font-weight:700;letter-spacing:.1em; color:var(--brand-2);display:block;margin-bottom:14px; } .step h4{font-size:1.02rem;margin-bottom:7px;letter-spacing:-.01em} .step p{font-size:.9rem;color:var(--text-2)} /* ── Marquee ────────────────────────────────────────────────────── */ .marquee{ overflow:hidden;border-block:1px solid var(--line); padding-block:18px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .marquee-track{display:flex;gap:44px;width:max-content;animation:slide 34s linear infinite} .marquee span{ font-family:"Bricolage Grotesque",sans-serif; font-size:clamp(1.1rem,2.4vw,1.6rem);font-weight:700; letter-spacing:-.02em;color:var(--text-3);white-space:nowrap; display:flex;align-items:center;gap:44px; } .marquee span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)} @keyframes slide{to{transform:translateX(-50%)}} /* ── CTA band ───────────────────────────────────────────────────── */ .cta{ border-radius:var(--r-xl);padding:clamp(36px,6vw,72px); background: radial-gradient(100% 140% at 0% 0%, rgba(109,91,245,.30), transparent 60%), radial-gradient(90% 130% at 100% 100%, rgba(18,179,168,.22), transparent 60%), var(--surface); border:1px solid var(--line-strong); text-align:center; } .cta h2{margin-bottom:16px} .cta .lede{margin-inline:auto;text-align:center} .cta .hero-cta{justify-content:center} /* ── Footer ─────────────────────────────────────────────────────── */ footer{border-top:1px solid var(--line);padding-block:52px 40px} .foot-grid{display:grid;gap:32px} @media(min-width:760px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}} .foot-col h5{ font-size:.74rem;letter-spacing:.16em;text-transform:uppercase; color:var(--text-3);margin-bottom:16px;font-weight:700; } .foot-col a{display:block;padding:5px 0;color:var(--text-2);font-size:.92rem;transition:color .2s} .foot-col a:hover{color:var(--text)} .foot-bottom{ margin-top:44px;padding-top:24px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between; font-size:.84rem;color:var(--text-3); } /* ── Forms ──────────────────────────────────────────────────────── */ .field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px} .field label{font-size:.86rem;font-weight:600;color:var(--text-2)} .field input,.field textarea,.field select{ width:100%;padding:14px 16px;border-radius:var(--r-sm); background:var(--ink-2);border:1px solid var(--line-strong); color:var(--text);font-family:inherit;font-size:.95rem; transition:border-color .2s,box-shadow .2s; } .field textarea{min-height:130px;resize:vertical} .field input:focus,.field textarea:focus,.field select:focus{ outline:none;border-color:var(--brand); box-shadow:0 0 0 4px rgba(109,91,245,.16); } .field-row{display:grid;gap:0 18px} @media(min-width:660px){.field-row{grid-template-columns:1fr 1fr}} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } .reveal{opacity:1;transform:none} } /* ═══════════════════════════════════════════════════════════════════ Part 2 — product pages, guides, packages, forms ═══════════════════════════════════════════════════════════════════ */ /* ── Accent scoping ─────────────────────────────────────────────── */ body{--accent:var(--brand);--tint:rgba(109,91,245,.16)} body[data-product="pugmark"]{--accent:var(--pugmark);--tint:rgba(240,153,123,.14)} body[data-product="pinzaa"] {--accent:var(--pinzaa); --tint:rgba(224,126,26,.15)} body[data-product="nabza"] {--accent:var(--nabza); --tint:rgba(124,92,247,.16)} .accent{color:var(--accent)} /* Home product cards each carry their own accent */ .product[data-product="pugmark"]{--accent:var(--pugmark);--tint:rgba(240,153,123,.12)} .product[data-product="pinzaa"] {--accent:var(--pinzaa); --tint:rgba(224,126,26,.13)} .product[data-product="nabza"] {--accent:var(--nabza); --tint:rgba(124,92,247,.13)} /* ── Skip link ──────────────────────────────────────────────────── */ .skip{position:absolute;left:-9999px;top:0;z-index:200} .skip:focus{ left:12px;top:12px;padding:10px 16px;border-radius:10px; background:var(--brand);color:#fff;font-weight:650; } :focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;border-radius:6px} /* ── Nav additions ──────────────────────────────────────────────── */ .nav-links a.here{color:var(--text)} .nav-links a[data-nav]{position:relative} .nav-links a.here::after{ content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px; background:var(--brand);border-radius:2px; } @media(max-width:820px){.nav-links a.here::after{display:none}} /* ── Section heads ──────────────────────────────────────────────── */ .head{max-width:62ch} .head h2{margin:14px 0 14px} .head-split{display:grid;gap:20px;align-items:end} @media(min-width:900px){.head-split{grid-template-columns:1.35fr .65fr}} /* ── Badges ─────────────────────────────────────────────────────── */ .badges{display:flex;flex-wrap:wrap;gap:8px} .badge{ display:inline-flex;align-items:center;gap:7px; font-size:.74rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase; padding:6px 12px;border-radius:999px; border:1px solid var(--line-strong);color:var(--text-2); background:rgba(255,255,255,.04); } .badge::before{ content:"";width:6px;height:6px;border-radius:50%;background:var(--text-3); } .badge.on::before{background:#5FD08A;box-shadow:0 0 0 3px rgba(95,208,138,.18)} .badge.warm::before{background:var(--accent);box-shadow:0 0 0 3px var(--tint)} /* ── Google Play button ─────────────────────────────────────────── */ .btn-play{ background:#fff;color:#0B0A12;gap:11px;padding:11px 22px; box-shadow:0 14px 34px -16px rgba(255,255,255,.5); } .btn-play:hover{transform:translateY(-2px)} .btn-play .pl{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15} .btn-play .pl small{font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;opacity:.62} .btn-play .pl strong{font-size:.98rem;font-weight:700;letter-spacing:-.01em} .btn-play svg{width:21px;height:21px} .btn-play.is-soon{ background:transparent;color:var(--text-2); border:1px dashed var(--line-strong);box-shadow:none;cursor:default; } .btn-play.is-soon:hover{transform:none} .btn-play.is-soon .pl strong{color:var(--text)} .track-note{ margin-top:14px;font-size:.83rem;color:var(--text-3);max-width:46ch; padding-left:14px;border-left:2px solid var(--line-strong); } /* ── Phone frame ────────────────────────────────────────────────── */ .phone{ position:relative;width:min(268px,72vw);margin-inline:auto; border-radius:34px;padding:9px; background:linear-gradient(160deg,#2A2740,#131126); border:1px solid var(--line-strong); box-shadow:var(--shadow); } .phone::before{ content:"";position:absolute;top:17px;left:50%;transform:translateX(-50%); width:74px;height:5px;border-radius:99px;background:rgba(0,0,0,.55);z-index:2; } .phone img{border-radius:26px;width:100%;height:auto;background:var(--surface-2)} .phone-glow{ position:absolute;inset:auto 8% -14% 8%;height:60px;border-radius:50%; background:var(--accent);filter:blur(46px);opacity:.34;z-index:-1; } /* ── Guide (image-by-image how-to) ──────────────────────────────── */ .guide{counter-reset:g;display:flex;flex-direction:column;gap:clamp(56px,9vw,112px);margin-top:60px} .guide-row{display:grid;gap:clamp(28px,5vw,60px);align-items:center} @media(min-width:900px){ .guide-row{grid-template-columns:.85fr 1.15fr} .guide-row:nth-child(even) .guide-shot{order:2} } .guide-n{ counter-increment:g; font-family:"Bricolage Grotesque",sans-serif;font-weight:700; font-size:.78rem;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);display:flex;align-items:center;gap:12px;margin-bottom:14px; } .guide-n::before{content:"Step " counter(g,decimal-leading-zero)} .guide-n::after{content:"";flex:1;height:1px;background:var(--line);max-width:70px} .guide-body h3{margin-bottom:12px} .guide-body > p{color:var(--text-2);margin-bottom:18px} .ticks{list-style:none;display:flex;flex-direction:column;gap:11px} .ticks li{ position:relative;padding-left:28px;font-size:.93rem;color:var(--text-2); } .ticks li::before{ content:"";position:absolute;left:0;top:.44em;width:15px;height:15px;border-radius:50%; background:var(--tint);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); } .ticks li::after{ content:"";position:absolute;left:5px;top:.72em;width:5px;height:2.5px; border-left:2px solid var(--accent);border-bottom:2px solid var(--accent); transform:rotate(-45deg); } /* ── Note / callout ─────────────────────────────────────────────── */ .note{ display:flex;gap:14px;padding:18px 20px;border-radius:var(--r-md); background:var(--surface);border:1px solid var(--line); border-left:3px solid var(--accent); font-size:.92rem;color:var(--text-2); } .note strong{color:var(--text);font-weight:650} .note svg{width:19px;height:19px;flex:0 0 auto;color:var(--accent);margin-top:2px} /* ── Safety / principle grid ────────────────────────────────────── */ .grid-3{display:grid;gap:16px;margin-top:44px} @media(min-width:760px){.grid-3{grid-template-columns:repeat(3,1fr)}} .card{ padding:26px 24px;border-radius:var(--r-md); background:var(--surface);border:1px solid var(--line); transition:border-color .3s var(--ease),transform .3s var(--ease); } .card:hover{border-color:var(--line-strong);transform:translateY(-3px)} .card h4{font-size:1.02rem;margin-bottom:8px;letter-spacing:-.01em} .card p{font-size:.92rem;color:var(--text-2)} .card-ico{ width:40px;height:40px;border-radius:12px;display:grid;place-items:center; background:var(--tint);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); margin-bottom:16px;color:var(--accent); } .card-ico svg{width:19px;height:19px} /* ── Pricing / packages ─────────────────────────────────────────── */ .tiers{display:grid;gap:16px;margin-top:44px} @media(min-width:860px){.tiers{grid-template-columns:repeat(3,1fr)}} .tier{ display:flex;flex-direction:column; padding:30px 26px;border-radius:var(--r-lg); background:var(--surface);border:1px solid var(--line); } .tier.featured{ background:radial-gradient(120% 90% at 50% 0%,var(--tint),transparent 60%),var(--surface-2); border-color:color-mix(in srgb,var(--accent) 40%,transparent); } .tier-name{font-size:.76rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)} .tier-price{ font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.03em; font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1.05;margin:14px 0 6px; } .tier-price small{font-size:.9rem;font-weight:500;color:var(--text-3);letter-spacing:0} .tier > p{font-size:.92rem;color:var(--text-2);margin-bottom:20px} .tier .ticks{margin-bottom:26px;flex:1} .tier .btn{width:100%} /* ── FAQ ────────────────────────────────────────────────────────── */ .faq{margin-top:40px;border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{ list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative; font-weight:600;font-size:1.02rem;letter-spacing:-.01em; transition:color .2s; } .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--accent)} .faq summary::after{ content:"";position:absolute;right:6px;top:50%;width:11px;height:11px; border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3); transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease); } .faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)} .faq details p{padding:0 0 24px;color:var(--text-2);font-size:.95rem;max-width:72ch} /* ── Process rail ───────────────────────────────────────────────── */ .rail{display:grid;gap:0;margin-top:48px} .rail-item{ display:grid;gap:6px 26px;padding:26px 0; border-top:1px solid var(--line); grid-template-columns:auto 1fr; } .rail-item:last-child{border-bottom:1px solid var(--line)} .rail-n{ font-family:"Bricolage Grotesque",sans-serif;font-weight:700; font-size:.8rem;letter-spacing:.12em;color:var(--brand-2);padding-top:5px; } .rail-item h4{font-size:1.1rem;letter-spacing:-.015em} .rail-item p{grid-column:2;color:var(--text-2);font-size:.94rem;max-width:64ch} /* ── Form card ──────────────────────────────────────────────────── */ .form-card{ padding:clamp(26px,4vw,44px);border-radius:var(--r-lg); background:var(--surface);border:1px solid var(--line); } .field .hint{font-size:.79rem;color:var(--text-3);font-weight:400} .field select{appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,#7E789C 50%),linear-gradient(135deg,#7E789C 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%; background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px} .field select option{background:var(--ink-2);color:var(--text)} .chips{display:flex;flex-wrap:wrap;gap:9px} .chip{position:relative} .chip input{position:absolute;opacity:0;width:0;height:0} .chip span{ display:inline-block;padding:9px 15px;border-radius:999px;cursor:pointer; border:1px solid var(--line-strong);font-size:.88rem;color:var(--text-2); transition:all .2s var(--ease); } .chip input:checked + span{ background:var(--tint);border-color:var(--brand);color:var(--text); } .chip input:focus-visible + span{outline:2px solid var(--brand-2);outline-offset:2px} .form-status{ margin-top:18px;padding:14px 16px;border-radius:var(--r-sm); font-size:.9rem;display:none; } .form-status.show{display:block} .form-status.ok{background:rgba(95,208,138,.10);border:1px solid rgba(95,208,138,.32);color:#BDECCE} .form-status.err{background:rgba(249,115,22,.10);border:1px solid rgba(249,115,22,.32);color:#FBD3B4} /* ── Contact rows ───────────────────────────────────────────────── */ .contact-list{display:flex;flex-direction:column;gap:12px;margin-top:26px} .contact-item{ display:flex;align-items:center;gap:14px;padding:16px 18px; border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line); transition:border-color .2s; } a.contact-item:hover{border-color:var(--brand)} .contact-item svg{width:18px;height:18px;color:var(--brand-2);flex:0 0 auto} .contact-item .ci-l{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)} .contact-item .ci-v{font-size:.95rem;color:var(--text)} /* ── Hero visual (home) ─────────────────────────────────────────── */ .orbit{position:relative;aspect-ratio:1;width:100%;max-width:440px;margin-inline:auto} .orbit-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line)} .orbit-ring.r2{inset:14%;border-style:dashed;border-color:rgba(255,255,255,.07)} .orbit-ring.r3{inset:28%} /* No plate. The mark's own ring IS the innermost orbit ring — a rounded square here would add a third silhouette that means nothing, and would make the company read as a fourth app. */ .orbit-core{ position:absolute;inset:27%;border-radius:50%; display:grid;place-items:center; } .orbit-core svg{position:relative;z-index:2;width:100%;height:100%;color:#fff; filter:drop-shadow(0 0 18px rgba(124,92,247,.45))} /* Light instead of a background plate, so the code rain still shows through. */ .core-glow{ position:absolute;inset:-16%;border-radius:50%;z-index:0; background:radial-gradient(closest-side, rgba(109,91,245,.40), rgba(109,91,245,.12) 58%, transparent 76%); } /* ── The comet ────────────────────────────────────────────────────── A light falling around the ring: a wide faint trail furthest back, a narrower bright tail closer in, and a round head at the front. Three layers on the same 5.5s `orbit` animation, so they stay locked together. All of them sit ABOVE the mark and blend with `screen` — at a lower z-index they would hide behind the very ring they travel along, which is exactly the bug this replaced. The mask percentages place each band on the ring line. They are tied to the mark's viewBox: the ring sits at 88.8% of the half-width. If the viewBox changes, recompute these. */ .core-trail,.core-sweep,.core-comet{ position:absolute;inset:0;border-radius:50%; pointer-events:none;mix-blend-mode:screen; /* A comet passes, it does not loop. One fast lap (~3.1s), then the ring goes dark for ~5.9s before the next. Continuous motion next to body copy is what makes people stop reading; an occasional event is what makes them look. Tune the cadence with the duration below: the lap is always 35% of it. */ animation:comet-pass 9s linear infinite; } @keyframes comet-pass{ 0% {transform:rotate(0deg); opacity:0} 4% {opacity:1} 27% {opacity:1} 35% {transform:rotate(360deg); opacity:0} 100% {transform:rotate(360deg); opacity:0} } /* Furthest back: wide, faint, long. */ .core-trail{ z-index:3; background:conic-gradient(from 0deg, transparent 0deg 205deg, rgba(94,234,212,.10) 280deg, rgba(124,92,247,.20) 330deg, rgba(150,240,225,.30) 356deg, transparent 360deg); -webkit-mask-image:radial-gradient(closest-side, transparent 0 81%, #000 85%, #000 93%, transparent 97%); mask-image:radial-gradient(closest-side, transparent 0 81%, #000 85%, #000 93%, transparent 97%); filter:blur(1.5px); } /* Closer in: narrow and bright, so the tail reads as tapering. */ .core-sweep{ z-index:4; background:conic-gradient(from 0deg, transparent 0deg 300deg, rgba(94,234,212,.30) 332deg, rgba(180,250,238,.85) 351deg, rgba(255,255,255,1) 359deg, transparent 360deg); -webkit-mask-image:radial-gradient(closest-side, transparent 0 85%, #000 87.6%, #000 90.4%, transparent 93%); mask-image:radial-gradient(closest-side, transparent 0 85%, #000 87.6%, #000 90.4%, transparent 93%); } /* The head. Sits at 12 o'clock on the ring line, which is where the bright end of the tail lands, and rides round with it. */ .core-comet{z-index:5} .core-comet i{ position:absolute;top:5.6%;left:50%; width:5.6%;aspect-ratio:1;margin:-2.8% 0 0 -2.8%; border-radius:50%; background:radial-gradient(circle, #FFFFFF 0 30%, #D6FFF6 52%, rgba(120,240,222,.45) 74%, transparent 100%); box-shadow:0 0 12px 2px rgba(160,248,232,.8), 0 0 34px 9px rgba(94,234,212,.32); } /* The chip breathes, faintly. */ .core-chip{ transform-box:fill-box;transform-origin:center; animation:core-breathe 3.4s var(--ease) infinite; } @keyframes core-breathe{ 0%,100%{transform:scale(1);opacity:.92} 50%{transform:scale(1.09);opacity:1} } @media(prefers-reduced-motion:reduce){ .core-trail,.core-sweep,.core-comet{animation:none} .core-trail,.core-sweep{opacity:.45} .core-chip{animation:none} } .orbiter{ position:absolute;inset:0; animation:orbit var(--dur,22s) linear infinite; animation-delay:var(--delay,0s); } /* Square, on purpose: square reads as "an app", the round core as the system they belong to. */ .orbiter i{ position:absolute;top:var(--r,2%);left:50%;margin-left:-27px; width:54px;height:54px;border-radius:16px;display:grid;place-items:center; background:rgba(21,18,42,.66); border:1px solid color-mix(in srgb,currentColor 30%,transparent); -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px); animation:counter var(--dur,22s) linear infinite; animation-delay:var(--delay,0s); box-shadow:0 12px 30px -14px rgba(0,0,0,.9), 0 0 26px -10px currentColor, inset 0 1px 0 rgba(255,255,255,.07); } .orbiter i svg{width:24px;height:24px} @keyframes orbit{to{transform:rotate(360deg)}} @keyframes counter{to{transform:rotate(-360deg)}} @media(prefers-reduced-motion:reduce){.orbiter,.orbiter i{animation:none}} /* ── Misc ───────────────────────────────────────────────────────── */ .hr{height:1px;background:var(--line);border:0} .center{text-align:center} .center .lede{margin-inline:auto} .doc-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} .doc-links a{ font-size:.88rem;padding:9px 16px;border-radius:999px; border:1px solid var(--line-strong);color:var(--text-2);transition:all .2s; } .doc-links a:hover{border-color:var(--accent);color:var(--text)} .section-tight{padding-block:clamp(48px,7vw,84px)} /* ═══════════════════════════════════════════════════════════════════ The summoning — a ~3s intro that draws the mark, then gets out of the way. Runs once per session on the home page. Every rule here is decorative: if the JS never runs, a