/* Kurdify / KurdConnect marketing site, shared design system. Tokens mirror /Users/siavash/Documents/kurdify/index.html so pages feel native. Powered by Kavalsia Inc. */ :root{ --bg:#0b1418;--panel:#0f1d22;--panel2:#12252b;--line:#1e3a42;--line2:#295059; --text:#eaf4f2;--muted:#8fb0ad;--gold:#e0b64a;--gold2:#f0cd6e;--green:#2fbf87;--red:#e0574f; --dred:#7c241d;--dred2:#b23a2e; --sun:#d9b13a;--r:16px; } html[data-theme="light"]{ --bg:#f4f7f6;--panel:#ffffff;--panel2:#eef3f2;--line:#dce6e4;--line2:#c2d4d0; --text:#12262c;--muted:#556f6a;--gold:#8a6508;--gold2:#7a5804;--green:#0f7a4c;--red:#cc3b31;--sun:#c99a2e; --dred:#8a2b22;--dred2:#a5342a; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media(min-width:820px){html{font-size:94%}} body{font-family:'Plus Jakarta Sans','Vazirmatn',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} :root[dir=rtl] body{font-family:'Vazirmatn','Plus Jakarta Sans',-apple-system,sans-serif} a{color:var(--gold2);text-decoration:none} img{max-width:100%;display:block} h1,h2,h3,h4{text-wrap:balance;letter-spacing:-.02em;line-height:1.14} h3,h4{letter-spacing:-.01em;line-height:1.25} /* English: force all headlines onto the Sans display stack (never a serif). */ :root[lang="en"] h1,:root[lang="en"] h2,:root[lang="en"] h3,:root[lang="en"] h4,:root[lang="en"] h5,:root[lang="en"] h6{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important} p{text-wrap:pretty} .wrap{max-width:1680px;margin:0 auto;padding:0 clamp(22px,5vw,72px)} .wrap-wide{max-width:1680px} @media(max-width:640px){.wrap{padding-inline:20px!important}} /* ---- top banner ---- */ .topbanner{background:linear-gradient(90deg,var(--gold),#caa23a,var(--gold));color:#231a05;font-weight:700;font-size:.83rem;text-align:center;padding:.55rem 16px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:nowrap} .topbanner svg{width:15px;height:15px;flex:none} .topbanner a{color:#231a05;font-weight:800;text-decoration:underline;text-underline-offset:2px} html[data-theme="light"] .topbanner{color:#3a2c08} @media(max-width:520px){.topbanner{font-size:.68rem;gap:7px;padding:.5rem 10px}} /* ---- nav ---- */ .nav{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)} /* Header (banner + nav) slides down smoothly once the preloader clears. Default is visible, so no-JS / reduced-motion always shows it; only the preloading state lifts it off-screen, and removing that state transitions it back in. */ /* small, subtle downward slide that lands ~2s in (after the preloader clears + a beat) */ .topbanner,.nav{transition:transform 1s cubic-bezier(.16,1,.3,1) .45s, opacity .8s ease .45s} html.preloading .topbanner,html.preloading .nav{transform:translateY(-16px);opacity:0} @media(prefers-reduced-motion:reduce){ .topbanner,.nav{transition:none} html.preloading .topbanner,html.preloading .nav{transform:none;opacity:1} } .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:14px} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--text)} .brand .sun{width:24px;height:24px;color:var(--sun);flex:none} .brand b{color:var(--gold)} .nav-links{display:flex;gap:24px;align-items:center} .nav-links a{color:var(--muted);font-size:.9rem;font-weight:600;white-space:nowrap} .nav-links a:hover{color:var(--text)} .nav-links a.nav-on{color:var(--gold)} .nav-actions{display:inline-flex;align-items:center;gap:9px} .icon-btn{background:var(--panel);border:1px solid var(--line2);color:var(--text);width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;font-family:inherit} .icon-btn:hover{border-color:var(--gold)} .icon-btn svg{width:18px;height:18px} .lang-btn{background:var(--panel);border:1px solid var(--line2);color:var(--text);border-radius:10px;height:38px;padding:0 .8rem;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px} .lang-btn:hover{border-color:var(--gold)} .lang-btn svg{width:15px;height:15px} .lang-wrap{position:relative} .lang-menu{position:absolute;top:calc(100% + 7px);inset-inline-end:0;min-width:150px;background:var(--panel);border:1px solid var(--line2);border-radius:13px;padding:6px;box-shadow:0 18px 44px rgba(0,0,0,.45);z-index:90;display:none} .lang-menu.open{display:block} .lang-opt{display:flex;align-items:center;justify-content:space-between;padding:.55rem .8rem;border-radius:9px;cursor:pointer;font-size:.88rem;font-weight:600;color:var(--text);width:100%;background:none;border:none;font-family:inherit;text-align:start} .lang-opt:hover{background:var(--panel2)} .lang-opt.on{color:var(--gold)} .lang-opt .lo-ck{width:15px;height:15px;opacity:0;color:var(--gold)} .lang-opt.on .lo-ck{opacity:1} /* "More" nav dropdown (I2) - modeled on .lang-* mechanics */ .more-wrap{position:relative;display:inline-flex;align-items:center} .more-btn{background:none;border:none;color:var(--muted);font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:0;white-space:nowrap} .more-btn:hover{color:var(--text)} .more-chev{width:14px;height:14px} .more-menu{position:absolute;top:calc(100% + 12px);inset-inline-end:0;min-width:200px;background:var(--panel);border:1px solid var(--line2);border-radius:13px;padding:6px;box-shadow:0 18px 44px rgba(0,0,0,.45);z-index:90;display:none} .more-menu.open{display:block} .more-menu a{display:block;padding:.55rem .8rem;border-radius:9px;font-size:.88rem;font-weight:600;color:var(--text);white-space:nowrap} .more-menu a:hover{background:var(--panel2);color:var(--text)} .more-menu a.nav-on{color:var(--gold)} .burger{display:none;background:var(--panel);border:1px solid var(--line2);color:var(--text);cursor:pointer;width:38px;height:38px;border-radius:10px;align-items:center;justify-content:center} .mobile-menu{display:none;position:fixed;top:70px;inset-inline:0;background:var(--panel);border-bottom:1px solid var(--line2);padding:8px;z-index:55;flex-direction:column;max-height:82vh;overflow:auto;box-shadow:0 14px 34px rgba(0,0,0,.35)} .mobile-menu.open{display:flex} .mobile-menu a{padding:.85rem 1rem;color:var(--text);font-weight:700;border-radius:10px;text-decoration:none} .mobile-menu a:hover,.mobile-menu a.nav-on{background:var(--panel2);color:var(--gold)} .mm-langs{display:flex;gap:8px;flex-wrap:wrap;padding:.7rem 1rem} .mm-lang{padding:.5rem .9rem;border:1px solid var(--line2);border-radius:8px;font-weight:700;font-size:.82rem;cursor:pointer;background:var(--panel2);color:var(--text);font-family:inherit} .mm-lang.on{background:var(--gold);color:#231a05;border-color:var(--gold)} @media(max-width:900px){.nav-links{display:none}.burger{display:inline-flex}} /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:#231a05;font-weight:800;padding:.7rem 1.2rem;border-radius:11px;font-size:.9rem;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:.15s;text-decoration:none;line-height:1.2} .btn:hover{background:var(--gold2);color:#231a05} .btn svg{width:17px;height:17px;flex:none} .btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line2)} .btn.ghost:hover{border-color:var(--gold);background:transparent;color:var(--text)} .btn.green{background:var(--green);color:#04231a} .btn.green:hover{background:#4dd39f;color:#04231a} .btn.lg{padding:.95rem 1.7rem;font-size:1rem} .btn.block{width:100%;justify-content:center} /* ---- hero ---- */ .hero{padding:clamp(2.6rem,7vw,5.5rem) 0 2.5rem;position:relative;overflow:hidden} .hero::after{content:"";position:absolute;top:-140px;inset-inline-end:-90px;width:480px;height:480px;background:radial-gradient(circle,rgba(217,177,58,.22),transparent 70%);pointer-events:none;z-index:0} .hero .wrap::before{content:"";position:absolute;bottom:-160px;inset-inline-start:-120px;width:420px;height:420px;background:radial-gradient(circle,color-mix(in srgb,var(--green) 20%,transparent),transparent 70%);pointer-events:none;z-index:0} /* Hero wash: Erbil Citadel (Wahlen, CC0 / public domain, via Wikimedia). Sits under the copy and fades out before the text block ends, so contrast never drops. Decorative only, hence no and aria-hidden. Raised from .12 (near-invisible on the dark panel) so the photo actually reads instead of the hero looking like flat black. */ .hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(180deg,rgba(6,10,12,.55),rgba(6,10,12,.2) 45%,var(--bg) 92%),url(img/hero-erbil.jpg) center 35%/cover no-repeat;opacity:.34; -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 48%,transparent 92%); mask-image:linear-gradient(to bottom,#000 0%,#000 48%,transparent 92%)} html[data-theme="light"] .hero::before{opacity:.16} @media(prefers-reduced-motion:reduce){.hero::before{opacity:.22}} .hero .wrap{position:relative;z-index:1} .eyebrow{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line2);color:var(--gold);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.32rem .75rem;border-radius:100px} .eyebrow svg{width:12px;height:12px} .hero h1{font-size:clamp(2.1rem,6vw,3.6rem);line-height:1.06;margin:1.1rem 0 .9rem;font-weight:800} .hero h1 span{color:var(--gold)} .hero-lead{color:var(--muted);font-size:clamp(1rem,2.4vw,1.18rem);max-width:640px} .hero-cta{display:flex;gap:12px;margin-top:1.8rem;flex-wrap:wrap} .center{text-align:center} /* .hero-us is a second, standalone hero paragraph (the brand tagline). Like .hero-lead it is width-capped, so it needs an auto inline margin or the block hugs the inline-start edge and reads as misaligned under a centred hero. !important overrides a legacy inline `margin:.4rem 0 1.2rem` still carried by one page this pass could not edit; logical props keep RTL (ckb/ar) correct. */ .center .hero-lead{margin-inline:auto} .center .hero-us{margin-inline:auto!important} /* Give CTAs a shared min-width so a two-button row reads as balanced around center (otherwise a narrow primary + wide secondary looks off-center), without stretching a lone button. */ .center .hero-cta{justify-content:center} .center .hero-cta .btn{min-width:190px;justify-content:center;text-align:center} /* ---- IN / OUTSIDE chooser ---- */ /* Three tracks, not two: the middle one is the bridge that joins the two homes. */ .chooser{display:grid;grid-template-columns:1fr auto 1fr;gap:0;margin-top:2.4rem;align-items:stretch} @media(max-width:680px){.chooser{grid-template-columns:1fr}} /* ---- The bridge: one rail, one junction ---- Gold is Kurdify (inside Kurdistan), green is KurdConnect (beyond it). Each rail is transparent where it meets its own card and solid where it meets the node, so the eye is pulled to the junction rather than to either side. The mark in the node is the roj, the same sun as .hero-roj, which is what the two sides actually share. Gradients are physical, so the horizontal ones are written for the RTL default (Sorani) and flipped under :root[dir=ltr]; the vertical mobile ones need no flip. */ /* Overhangs the 18px grid gap on both sides via negative margin, so the rails reach the card edges instead of stopping short and leaving the node floating in dead space. The auto track still sizes to the margin box (120 - 36 = 84px), so the cards themselves do not move. */ .cc-bridge{display:flex;align-items:center;justify-content:center;width:120px;align-self:center} .ccb-rail{flex:1 1 auto;height:2px;border-radius:2px} @media (prefers-reduced-motion:no-preference){.ccb-rail{animation:ccbRailFade 5s ease-in-out infinite}} @keyframes ccbRailFade{0%,100%{opacity:.35}50%{opacity:1}} .ccb-rail-a{background:linear-gradient(90deg,var(--gold),transparent)} .ccb-rail-b{background:linear-gradient(90deg,transparent,var(--green))} :root[dir=ltr] .ccb-rail-a{background:linear-gradient(90deg,transparent,var(--gold))} :root[dir=ltr] .ccb-rail-b{background:linear-gradient(90deg,var(--green),transparent)} .ccb-node{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(160deg,color-mix(in srgb,var(--panel2) 92%,var(--gold)),var(--panel2)); /* The hairline is gone; the knock-out ring against the page and a soft lift carry the shape instead, which is the same borderless treatment the chooser cards and stat tiles use. */ box-shadow:0 0 0 7px var(--bg),0 6px 18px -8px rgba(0,0,0,.55), inset 0 1px 0 color-mix(in srgb,var(--gold) 18%,transparent)} /* Slow breathing halo: the node's glow swells to a broad soft blur, then eases back down. */ @media (prefers-reduced-motion:no-preference){ .ccb-node{animation:ccbGlow 5s ease-in-out infinite} } @keyframes ccbGlow{ 0%,100%{ box-shadow:0 0 0 7px var(--bg),0 6px 18px -8px rgba(0,0,0,.55), 0 0 5px 0 color-mix(in srgb,var(--gold) 18%,transparent), inset 0 1px 0 color-mix(in srgb,var(--gold) 18%,transparent) } 50%{ box-shadow:0 0 0 7px var(--bg),0 6px 18px -8px rgba(0,0,0,.55), 0 0 30px 8px color-mix(in srgb,var(--gold) 55%,transparent), inset 0 1px 0 color-mix(in srgb,var(--gold) 30%,transparent) } } .ccb-node svg{width:19px;height:19px;color:var(--gold);animation:ccbSunPulse 5s ease-in-out infinite} @keyframes ccbSunPulse{ 0%,100%{opacity:.82;transform:scale(.94)} 50%{opacity:1;transform:scale(1.06)} } @media (prefers-reduced-motion:reduce){ .ccb-node svg{animation:none} } @media(max-width:680px){ /* Stacked cards: the rail turns vertical so the join survives the single-column layout instead of disappearing with the middle track. */ /* 54px left only 7px of rail either side of the node, which read as a stub rather than a join. 92px gives each rail ~26px, matching the desktop proportion. */ .cc-bridge{width:auto;margin-inline:0;height:92px;flex-direction:column;justify-self:center} .ccb-rail{width:2px;height:auto;flex:1 1 auto} .ccb-rail-a,:root[dir=ltr] .ccb-rail-a{background:linear-gradient(180deg,transparent,var(--gold))} .ccb-rail-b,:root[dir=ltr] .ccb-rail-b{background:linear-gradient(180deg,var(--green),transparent)} /* Mobile stack was reading as one crowded column: bridge card, chooser cards and stat strip sat with barely any air between them. Give each block real separation. */ .chooser{gap:22px;margin-top:2rem} .choose-card{padding:1.7rem 1.6rem} } /* Flat, square, flush pair: no radius, no per-card outline. The two cards sit edge to edge against the .cc-bridge column (chooser gap is 0) so the rail+node glow is the only seam between them, instead of two separately-bordered boxes floating apart. */ .choose-card{position:relative;display:block;background:var(--panel);border-radius:0;padding:2rem;text-align:start;overflow:hidden;transition:transform .18s,box-shadow .18s;color:var(--text)} /* A thin light sweeps around the flat card's edge instead of a static outline: same conic-gradient-ring technique as the old bridge card, but continuously rotating. */ @property --cc-a{syntax:'';inherits:false;initial-value:0deg} .choose-card::before{content:"";position:absolute;inset:0;padding:1.5px;pointer-events:none;z-index:2; background:conic-gradient(from var(--cc-a),transparent 0 75%,color-mix(in srgb,var(--gold) 90%,#fff) 88%,transparent 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude} .choose-card.out::before{background:conic-gradient(from var(--cc-a),transparent 0 75%,color-mix(in srgb,var(--green) 90%,#fff) 88%,transparent 100%)} @media (prefers-reduced-motion:no-preference){.choose-card::before{animation:ccBorder 4.5s linear infinite}.choose-card.out::before{animation-direction:reverse}} @keyframes ccBorder{to{--cc-a:360deg}} .choose-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.28)} .choose-card .cc-glow{position:absolute;inset-inline-end:-60px;top:-60px;width:200px;height:200px;border-radius:50%;filter:blur(30px);opacity:.5;pointer-events:none} .choose-card.in .cc-glow{background:radial-gradient(circle,rgba(224,182,74,.5),transparent 70%)} .choose-card.out .cc-glow{background:radial-gradient(circle,rgba(47,191,135,.45),transparent 70%)} .cc-ic{width:56px;height:56px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;position:relative} .choose-card.in .cc-ic{background:rgba(224,182,74,.14);color:var(--gold)} .choose-card.out .cc-ic{background:rgba(47,191,135,.14);color:var(--green)} .cc-ic svg{width:28px;height:28px} .choose-card h3{font-size:1.35rem;margin-bottom:.35rem} .choose-card p{color:var(--muted);font-size:.92rem;margin-bottom:1.1rem} .cc-go{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.9rem} .choose-card.in .cc-go{color:var(--gold)} .choose-card.out .cc-go{color:var(--green)} .cc-go svg{width:16px;height:16px;transition:.18s} .choose-card:hover .cc-go svg{transform:translateX(-4px)} :root[dir=ltr] .choose-card:hover .cc-go svg{transform:translateX(4px)} .cc-tag{position:absolute;inset-inline-end:1.4rem;top:1.4rem;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:.25rem .6rem;border-radius:100px;background:var(--panel2);color:var(--muted)} /* ---- sections ---- */ section.block{padding:clamp(2.6rem,6vw,4.5rem) 0;scroll-margin-top:88px} .s-head{max-width:720px;margin-bottom:2rem} /* Trailing call-to-action at the end of a section, under a card grid. These were hand-set inline at 1.2rem/1.6rem per page, which read as cramped: the button sat almost against the cards above it and the section boundary below. One rule, so the rhythm is the same on every page. */ .sec-cta{margin-top:clamp(1.9rem,3.2vw,2.9rem);text-align:center} /* "Free to list, free to use" band. Replaced 132 lines of plan cards on the landing page: price belongs on /pricing, after someone has seen the value. */ .free-band{max-width:760px;margin:0 auto;text-align:center;background:var(--panel); border:1px solid var(--line2);border-radius:20px;padding:clamp(1.6rem,4vw,2.6rem)} .free-band h2{margin:.4rem 0 .6rem} .free-band > p{color:var(--muted);max-width:56ch;margin:0 auto} .free-list{list-style:none;margin:1.4rem auto 0;padding:0;display:grid;gap:.6rem; max-width:34rem;text-align:start} .free-list li{display:flex;align-items:flex-start;gap:.6rem;color:var(--text)} .free-list svg{width:19px;height:19px;flex:none;margin-top:.15rem;color:var(--green)} .free-cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.6rem} .s-head.center{margin-inline:auto} .s-head .kicker{color:var(--gold);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.6rem} .s-head h2{font-size:clamp(1.5rem,3.6vw,2.3rem)} .s-head p{color:var(--muted);font-size:1rem;margin-top:.7rem} .divider{border:none;border-top:1px solid var(--line);margin:0} /* ---- feature / value cards ---- */ .grid{display:grid;gap:16px} .grid.g2{grid-template-columns:repeat(2,1fr)} .grid.g3{grid-template-columns:repeat(3,1fr)} .grid.g4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.grid.g3,.grid.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}} /* Borderless (see the full treatment further down); the surface and its glow separate the cards. This early declaration is kept for the layout only. */ .fcard{background:var(--panel);border:none;border-radius:var(--r);padding:1.5rem;transition:.15s;display:flex;flex-direction:column;height:100%} .grid.g3,.grid.g4,.grid.g2{align-items:stretch} .fcard:hover{border-color:var(--gold);transform:translateY(-3px)} .fcard .f-ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(224,182,74,.16),rgba(47,191,135,.08));color:var(--gold);margin-bottom:1rem} .fcard .f-ic svg{width:24px;height:24px} .fcard h3{font-size:1.1rem;margin-bottom:.45rem} .fcard p{color:var(--muted);font-size:.9rem} .fcard .f-more{display:inline-flex;align-items:center;gap:6px;margin-top:.8rem;font-size:.82rem;font-weight:700;color:var(--gold2)} .fcard ul{list-style:none;margin-top:.7rem;display:flex;flex-direction:column;gap:.4rem} .fcard ul li{color:var(--muted);font-size:.86rem;display:flex;gap:8px;align-items:flex-start} .fcard ul li svg{width:15px;height:15px;color:var(--green);flex:none;margin-top:3px} /* ---- stats strip ---- */ .stat-strip{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:2.4rem} .hstat{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--panel),color-mix(in srgb,var(--gold) 6%,var(--panel)));border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.5rem 1.15rem;text-align:center;min-width:140px;box-shadow:0 10px 26px -14px rgba(0,0,0,.5);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease} .hstat::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.85} .hstat:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--gold) 40%,var(--line));box-shadow:0 16px 34px -14px rgba(0,0,0,.6)} .hstat b{display:block;font-size:1.9rem;font-weight:800;color:var(--gold);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .hstat span{color:var(--muted);font-size:.78rem;margin-top:.45rem;display:block;letter-spacing:.01em} /* ---- alternating showcase rows ---- */ .showrow{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:clamp(2rem,5vw,3.4rem) 0} .showrow.rev .show-media{order:2} @media(max-width:800px){.showrow{grid-template-columns:1fr;gap:22px}.showrow.rev .show-media{order:0}} .show-txt .kicker{color:var(--gold);font-weight:800;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.6rem} .show-txt h3{font-size:clamp(1.3rem,3vw,1.9rem);margin-bottom:.7rem} .show-txt p{color:var(--muted);font-size:.96rem;margin-bottom:1rem} .show-list{list-style:none;display:flex;flex-direction:column;gap:.6rem} .show-list li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem} .show-list li svg{width:18px;height:18px;color:var(--green);flex:none;margin-top:3px} .show-media{position:relative;isolation:isolate;background:var(--panel);border:1px solid var(--line2);border-radius:20px;padding:1.4rem;min-height:230px;display:flex;align-items:center;justify-content:center} /* Moving light border: a gold-to-green sweep travels around the frame. Built as a conic-gradient masked to a 1.5px ring (the mask XOR carves the interior out, leaving only the border), with the gradient's start angle animated via the registered --sweep property. A second, softer ring bleeds a faint glow just outside. Falls back to a still gradient edge where @property or motion is off. */ @property --sweep{syntax:'';inherits:false;initial-value:0deg} .show-media::before,.show-media::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:-1} .show-media::before{ padding:1.5px; background:conic-gradient(from var(--sweep),transparent 0 58%,color-mix(in oklab,var(--gold) 85%,transparent) 72%,color-mix(in oklab,var(--gold2) 92%,#fff) 79%,color-mix(in oklab,var(--green) 85%,transparent) 88%,transparent 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude; } .show-media::after{inset:-6px;z-index:-2;opacity:.5;filter:blur(9px); background:conic-gradient(from var(--sweep),transparent 0 62%,color-mix(in oklab,var(--gold) 55%,transparent) 78%,color-mix(in oklab,var(--green) 50%,transparent) 90%,transparent 100%)} @media (prefers-reduced-motion:no-preference){ .show-media::before{animation:smSweep 6s linear infinite} .show-media::after{animation:smSweep 6s linear infinite} } @keyframes smSweep{to{--sweep:360deg}} /* ---- mock UI bits used in showcases ---- */ .mini-card{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:1rem;width:100%} .mini-row{display:flex;align-items:center;gap:12px;margin-bottom:.9rem} .mini-row:last-child{margin-bottom:0} .mini-logo{width:46px;height:46px;border-radius:11px;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,var(--panel),var(--panel2));color:var(--gold);border:1px solid var(--line);font-weight:800} .mini-logo svg{width:22px;height:22px} .mini-name{font-weight:700;font-size:.92rem} .mini-sub{color:var(--muted);font-size:.76rem} .pill{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:800;padding:.22rem .6rem;border-radius:100px} .pill.gold{background:var(--gold);color:#231a05} .pill.green{background:rgba(47,191,135,.16);color:var(--green)} .pill.muted{background:var(--panel);color:var(--muted);border:1px solid var(--line)} .pill svg{width:12px;height:12px} .verified{display:inline-flex;align-items:center;gap:5px;color:var(--green);font-size:.78rem;font-weight:800} .verified svg{width:16px;height:16px} /* ---- premium claimed-business listing mock (index.html .listing-card) ---- */ .listing-card{position:relative;overflow:hidden;padding:1.15rem; background: radial-gradient(120% 100% at 100% 0%, color-mix(in oklab,var(--green) 9%,transparent), transparent 55%), linear-gradient(180deg, color-mix(in oklab,var(--panel) 55%,var(--panel2)), var(--panel2)); border:1px solid color-mix(in oklab,var(--green) 20%,var(--line)); box-shadow:0 1px 0 color-mix(in oklab,#fff 7%,transparent) inset, 0 16px 36px -24px color-mix(in oklab,#000 80%,transparent)} .listing-card::before{content:"";position:absolute;inset-inline:0;top:0;height:1px; background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--green) 45%,transparent),transparent)} .listing-card .mini-logo{width:50px;height:50px;border-radius:13px;color:var(--gold); background:linear-gradient(145deg, color-mix(in oklab,var(--gold) 22%,var(--panel)), var(--panel2)); border:1px solid color-mix(in oklab,var(--gold) 30%,var(--line)); box-shadow:0 6px 14px -8px color-mix(in oklab,var(--gold) 60%,transparent), 0 1px 0 color-mix(in oklab,#fff 30%,transparent) inset} .listing-card .mini-name{font-size:.98rem;letter-spacing:-.01em} .listing-card .mini-sub{font-size:.78rem} .listing-card .verified{padding:.28rem .6rem;border-radius:99px;font-size:.72rem; background:color-mix(in oklab,var(--green) 15%,transparent); border:1px solid color-mix(in oklab,var(--green) 32%,transparent); box-shadow:0 0 12px -4px color-mix(in oklab,var(--green) 55%,transparent)} .listing-card .mini-row:last-child{gap:7px;flex-wrap:wrap} .listing-card .pill{padding:.3rem .66rem;font-size:.7rem} .listing-card .pill.green{border:1px solid color-mix(in oklab,var(--green) 34%,transparent); background:linear-gradient(180deg, color-mix(in oklab,var(--green) 22%,transparent), color-mix(in oklab,var(--green) 13%,transparent))} .listing-card .pill.gold{background:linear-gradient(180deg,var(--gold2),var(--gold)); box-shadow:0 3px 10px -5px color-mix(in oklab,var(--gold) 70%,transparent)} .listing-card .pill.muted{background:color-mix(in oklab,var(--text) 5%,var(--panel));border:1px solid var(--line2)} .listing-card .pill.muted svg{color:var(--gold)} /* countdown */ .countdown{display:flex;gap:8px;margin-top:.7rem} /* Borderless and raised. Depth comes from four stacked shadows rather than an outline: an inset top highlight and inset bottom shade give the tile thickness, a tight contact shadow seats it, and a wide soft shadow lifts it off the card. */ .cd-box{background:linear-gradient(180deg,color-mix(in srgb,var(--panel2) 94%,transparent),var(--panel)); border:none;border-radius:15px;padding:.72rem .8rem;text-align:center;min-width:60px; box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.55), 0 14px 26px -16px rgba(0,0,0,.9)} .cd-box b{display:block;font-size:1.2rem;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1} .cd-box span{font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} /* loyalty ladder */ .ladder{display:flex;gap:10px;flex-wrap:wrap;margin-top:.6rem} /* Same treatment as .cd-box so the two mockups read as one system. */ .rung{flex:1;min-width:90px;border:none;border-radius:16px;padding:1rem .9rem;text-align:center; background:linear-gradient(180deg,color-mix(in srgb,var(--panel2) 94%,transparent),var(--panel)); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.55), 0 14px 26px -16px rgba(0,0,0,.9)} .rung b{display:block;font-size:1.6rem;font-weight:800;color:var(--gold)} .rung.g1{background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 7%,var(--panel2)),var(--panel))} .rung.g2{background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 12%,var(--panel2)),var(--panel))} .rung.g3{background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 18%,var(--panel2)),var(--panel)); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.55), 0 16px 30px -16px rgba(224,182,74,.4)} .rung.exp{opacity:.55} .rung span{font-size:.72rem;color:var(--muted);display:block;margin-top:.2rem} .rung.exp{opacity:.5} /* ---- pricing ---- */ /* Plan columns are centred on the page and capped, so three cards stay a tidy block instead of stretching edge to edge on wide screens. */ /* first-year international-card offer, above the plan grid */ .card-offer{display:flex;align-items:center;gap:20px;flex-wrap:wrap;max-width:1040px;margin:0 auto 26px; padding:20px 24px;border-radius:16px;border:1px solid rgba(47,191,135,.4);background:rgba(47,191,135,.08)} .card-offer .co-pct{font-size:2.4rem;font-weight:800;line-height:1;color:#2fbf87;flex:none;letter-spacing:-.02em} .card-offer .co-txt{flex:1;min-width:min(100%,260px);display:flex;flex-direction:column;gap:6px} .card-offer .co-txt b{font-size:1.05rem} .card-offer .co-txt span{opacity:.8;font-size:.92rem;line-height:1.55} @media(max-width:560px){.card-offer{gap:14px;padding:18px}.card-offer .co-pct{font-size:2rem}} .price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,340px));gap:18px; align-items:stretch;justify-content:center;max-width:1080px;margin-inline:auto} @media(max-width:860px){.price-grid{grid-template-columns:minmax(0,420px)}} .plan{background:var(--panel);border:1px solid var(--line2);border-radius:20px;padding:1.8rem;display:flex;flex-direction:column;position:relative} .plan.feat{border-color:var(--gold);box-shadow:0 18px 50px rgba(224,182,74,.12)} .plan .plan-tag{position:absolute;top:-12px;inset-inline-start:1.8rem;background:var(--gold);color:#231a05;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:.28rem .8rem;border-radius:100px} .plan h3{font-size:1.15rem} .plan .price{font-size:2.6rem;font-weight:800;margin:.6rem 0 .1rem;line-height:1;letter-spacing:-.03em} .plan .price small{font-size:.95rem;font-weight:600;color:var(--muted)} .plan .plan-bill{color:var(--muted);font-size:.78rem;font-weight:600;margin:.2rem 0 .55rem} .plan .plan-bill b{color:var(--text);font-weight:700} .plan .plan-desc{color:var(--muted);font-size:.88rem;min-height:2.4em} .plan ul{list-style:none;margin:1.2rem 0;display:flex;flex-direction:column;gap:.7rem;flex:1} .plan ul li{display:flex;gap:9px;align-items:flex-start;font-size:.9rem} .plan ul li svg{width:17px;height:17px;color:var(--green);flex:none;margin-top:3px} .plan ul li.off{color:var(--muted);opacity:.6} .plan ul li.off svg{color:var(--muted)} /* Paid add-on row: reads as an extra you buy, not as an included feature. */ .plan ul li.addon{color:var(--gold2);font-weight:700;border-top:1px solid var(--line); padding-top:.7rem;margin-top:.1rem} .plan ul li.addon svg{color:var(--gold)} /* Card headings, price and CTA centre; the feature list stays start-aligned, because centred checklists are measurably harder to scan. */ .plan h3,.plan .price,.plan .plan-desc{text-align:center} .plan .plan-desc{margin-inline:auto} /* sponsorship cards */ .spon-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:680px){.spon-grid{grid-template-columns:1fr}} .spon{background:linear-gradient(150deg,var(--panel),var(--panel2));border:1px solid var(--line2);border-radius:18px;padding:1.6rem} .spon h4{font-size:1.05rem;display:flex;align-items:center;gap:9px} .spon .sp-ic{width:36px;height:36px;border-radius:10px;background:rgba(224,182,74,.14);color:var(--gold);display:flex;align-items:center;justify-content:center} .spon .sp-ic svg{width:19px;height:19px} .spon .sp-price{font-size:1.9rem;font-weight:800;margin:.5rem 0 .2rem} .spon .sp-price small{font-size:.9rem;color:var(--muted);font-weight:600} .spon p{color:var(--muted);font-size:.88rem} /* payment methods */ /* Auto-fit rather than a fixed 3, so the row stays balanced as payment methods are added or removed (USDT was removed; the backend rejects it). */ .pay-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:1.2rem} @media(max-width:640px){.pay-row{grid-template-columns:1fr}} .pay{background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:1.1rem;display:flex;gap:12px;align-items:center} .pay .pay-ic{width:44px;height:44px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem} .pay .pay-ic svg{width:22px;height:22px} .pay .fib{background:rgba(224,182,74,.14);color:var(--gold)} .pay .zc{background:rgba(224,87,79,.14);color:var(--red)} .pay b{font-size:.95rem;display:block} .pay span{color:var(--muted);font-size:.78rem} /* A method that cannot take money yet must not sit here looking identical to one that can. ZainCash has neither merchant credentials nor a wallet number for the hand-confirmed path, so the card is dimmed and badged rather than removed: it is a real intention, not a live option. Same badge treatment as Kurdify credit on the features page. */ .pay.is-soon{opacity:.62} .pay .soon{display:inline-block;font-size:.58rem;font-weight:800;letter-spacing:.04em; color:#231a05;background:var(--gold);padding:.1rem .45rem;border-radius:99px; vertical-align:middle;margin-inline-start:.4rem} /* ---- influencer levels ---- */ .lvl-scroll{overflow-x:visible;padding-bottom:0} .lvl-track{display:flex;gap:12px;min-width:min-content;justify-content:center;flex-wrap:wrap} .lvl{position:relative;flex:none;width:150px;background:var(--panel);border:1px solid var(--line2);border-radius:15px;padding:1.1rem;text-align:center;overflow:hidden} .lvl::after{content:"";position:absolute;inset:0;z-index:0;background-image:url(https://images.unsplash.com/photo-1451481357743-7d9b21edeb15?w=600&q=55&auto=format&fit=crop);background-size:cover;background-position:center;opacity:.1;filter:blur(2px);pointer-events:none} /* A light travels around each level card's edge: a rotating conic gradient masked to the 1px border ring. Staggered per card so the lights chase around the row. */ @property --lvl-a{syntax:'';inherits:false;initial-value:0deg} .lvl::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:0; background:conic-gradient(from var(--lvl-a),transparent 0 62%,color-mix(in srgb,var(--gold) 92%,#fff) 78%,color-mix(in srgb,var(--green) 85%,transparent) 88%,transparent 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude} .lvl>*{position:relative;z-index:1} @media(max-width:640px){ .lvl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none} .lvl-scroll::-webkit-scrollbar{display:none} .lvl-track{justify-content:flex-start;flex-wrap:nowrap} } @media (prefers-reduced-motion:no-preference){ .lvl::before{animation:lvlSpin 4.5s linear infinite} .lvl:nth-child(2)::before{animation-delay:-.55s} .lvl:nth-child(3)::before{animation-delay:-1.1s} .lvl:nth-child(4)::before{animation-delay:-1.65s} .lvl:nth-child(5)::before{animation-delay:-2.2s} .lvl:nth-child(6)::before{animation-delay:-2.75s} .lvl:nth-child(7)::before{animation-delay:-3.3s} } @keyframes lvlSpin{to{--lvl-a:360deg}} .lvl .lvl-n{font-size:.72rem;font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:.05em} .lvl .lvl-f{font-size:1.5rem;font-weight:800;margin:.3rem 0} .lvl .lvl-lb{color:var(--muted);font-size:.74rem} .lvl .lvl-dot{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--green));margin:0 auto .6rem;display:flex;align-items:center;justify-content:center;color:#231a05} .lvl .lvl-dot svg{width:17px;height:17px} /* ---- CTA band ---- */ .cta-band{background:linear-gradient(135deg,rgba(224,182,74,.12),rgba(47,191,135,.08));border:1px solid var(--line2);border-radius:24px;padding:clamp(2rem,5vw,3.4rem);text-align:center;position:relative;overflow:hidden} .cta-band h2{font-size:clamp(1.5rem,4vw,2.3rem);margin-bottom:.7rem} .cta-band p{color:var(--muted);max-width:560px;margin:0 auto 1.6rem;font-size:1rem} .cta-band .hero-cta{justify-content:center} /* ---- legal (privacy / terms) ---- */ .legal{max-width:820px;margin:0 auto;padding:clamp(2rem,5vw,3.4rem) 0} .legal .updated{color:var(--muted);font-size:.85rem;margin-bottom:2rem} .legal h2{font-size:1.3rem;margin:2.2rem 0 .7rem;padding-top:.4rem} .legal h3{font-size:1.05rem;margin:1.4rem 0 .5rem} .legal p{color:var(--muted);margin-bottom:.9rem;font-size:.95rem} .legal ul{margin:0 0 1rem;padding-inline-start:1.3rem;color:var(--muted)} .legal ul li{margin-bottom:.5rem;font-size:.93rem} .legal a{color:var(--gold2)} .legal .toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.5rem;margin-bottom:2rem} .legal .toc h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.7rem} .legal .toc ol{padding-inline-start:1.2rem;color:var(--text)} .legal .toc ol li{margin-bottom:.35rem;font-size:.9rem} .callout{background:var(--panel2);border:1px solid var(--line2);border-radius:14px;padding:1.1rem 1.3rem;margin:1.2rem 0;display:flex;gap:12px} .callout svg{width:20px;height:20px;color:var(--gold);flex:none;margin-top:2px} .callout p{margin:0;color:var(--text);font-size:.9rem} /* ---- FAQ ---- */ .faq{border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .faq details{border-bottom:1px solid var(--line)} .faq details:last-child{border-bottom:none} .faq summary{padding:1.1rem 1.3rem;cursor:pointer;font-weight:700;font-size:.98rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--panel)} .faq summary::-webkit-details-marker{display:none} .faq summary .fq-ic{width:20px;height:20px;color:var(--gold);transition:.2s;flex:none} .faq details[open] summary .fq-ic{transform:rotate(45deg)} .faq .fq-body{padding:0 1.3rem 1.3rem;margin-top:-.2rem;color:var(--muted);font-size:.92rem;line-height:1.6} /* ---- footer ---- */ footer{border-top:1px solid var(--line);padding:3rem 0 1.5rem;margin-top:3rem;color:var(--muted);font-size:.85rem} footer{position:relative} footer::before{content:"";position:absolute;top:-1px;inset-inline:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),var(--green),transparent);opacity:.55} .foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:30px;padding-block:20px 8px} /* 5 columns crowd below ~1040px, so drop the brand onto its own row first. */ @media(max-width:1040px) and (min-width:721px){.foot-grid{grid-template-columns:1fr 1fr 1fr 1fr;gap:26px}.foot-brand{grid-column:1/-1;margin-bottom:.4rem}.foot-brand p{max-width:none}} @media(max-width:720px){.foot-grid{grid-template-columns:1fr 1fr;gap:20px 24px}.foot-brand{grid-column:1/-1;margin-bottom:.4rem}.foot-brand p{max-width:none}} @media(max-width:420px){.foot-grid{grid-template-columns:1fr}} /* social row */ .foot-social{display:flex;gap:10px;margin-top:1.1rem} .foot-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;border:1px solid var(--line2);background:var(--panel);color:var(--text);opacity:.85;transition:.15s} .foot-social a:hover{color:var(--gold);border-color:var(--gold);opacity:1;transform:translateY(-2px)} .foot-social svg{width:19px;height:19px} .foot-brand p{color:var(--muted);font-size:.86rem;margin:.6rem 0 0;max-width:320px;line-height:1.55} .foot-col h5{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.9rem;font-weight:800} .foot-col a{display:block;color:var(--text);opacity:.75;font-size:.88rem;padding:.32rem 0;text-decoration:none} .foot-col a:hover{color:var(--gold);opacity:1} .foot-bottom{border-top:1px solid var(--line);margin-top:26px;padding:16px 0 0;text-align:center;color:var(--muted);font-size:.82rem} .foot-bottom span{color:var(--gold2);font-weight:700} /* ---- loading / error states (shared) ---- */ .state{display:none;padding:2.4rem 1rem;text-align:center;color:var(--muted)} .state.on{display:block} .spinner{width:34px;height:34px;border:3px solid var(--line2);border-top-color:var(--gold);border-radius:50%;margin:0 auto 1rem;animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .state .st-ic{width:40px;height:40px;color:var(--red);margin:0 auto .8rem} .state .st-retry{margin-top:1rem} @media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}} /* ============================================================ PRELOADER, ENTRY MOTION, MOBILE LAYER (added 2026-07-09) ============================================================ */ /* ---- preloader ---- */ #pre{position:fixed;inset:0;z-index:9999;background:var(--bg);display:grid;place-items:center; /* Failsafe: if JS never runs, fade out on our own so content is reachable. */ animation:preFailsafe .5s ease 40s forwards} #pre.done{opacity:0;visibility:hidden;transition:opacity .55s ease,visibility .55s ease} html.preloading{overflow:hidden} /* The typewriter preloader (.pre-in / .pre-type / #preText / .pre-bar / .pre-skip) was replaced by the sun-bloom orb, whose styles live in extras.css as .pl-*. Its markup is gone from all 14 pages that load this file, so those rules were dead and are removed here. That also retires the progress bar's animated bar width, which was the last layout-property animation in this file. .pre-sun stays: #pre still carries it, and the self-contained pages under cases/ ship their own copies of the old preloader markup and CSS, so nothing there depends on this file. */ .pre-sun{width:54px;height:54px;color:var(--sun);margin:0 auto 1.5rem;animation:preSpin 14s linear infinite} @keyframes preSpin{to{transform:rotate(360deg)}} @keyframes preFailsafe{to{opacity:0;visibility:hidden}} /* ---- scroll entry motion (only armed once JS is alive, so no-JS keeps content visible) ---- */ html.js-motion .reveal{opacity:0;transform:translateY(20px); transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)} html.js-motion .reveal.rv-in{opacity:1;transform:none} /* ---- premium hero entrance: a "focus-in" (blur -> sharp) that rises and settles, distinct from the generic scroll reveal used elsewhere on the page ---- */ html.js-motion .hero .eyebrow.reveal, html.js-motion .hero h1.reveal, html.js-motion .hero .hero-lead.reveal, html.js-motion .hero .hero-us.reveal, html.js-motion .hero .hero-cta.reveal{ opacity:0; transform:translateY(52px) scale(.955); filter:blur(22px); transition:opacity 1.5s cubic-bezier(.16,1,.3,1), transform 1.6s cubic-bezier(.16,1,.3,1), filter 1.35s cubic-bezier(.16,1,.3,1); will-change:opacity,transform,filter; } /* the headline gets a touch more travel + a settle-scale for extra presence */ html.js-motion .hero h1.reveal{transform:translateY(58px) scale(.94)} html.js-motion .hero .eyebrow.reveal.rv-in, html.js-motion .hero h1.reveal.rv-in, html.js-motion .hero .hero-lead.reveal.rv-in, html.js-motion .hero .hero-us.reveal.rv-in, html.js-motion .hero .hero-cta.reveal.rv-in{ opacity:1; transform:none; filter:blur(0); } /* the hero arc fades up a touch later so it settles after the copy */ html.js-motion .hero .hero-viz.reveal{opacity:0;transform:translateY(24px); transition:opacity 1.1s cubic-bezier(.16,1,.3,1) .15s, transform 1.1s cubic-bezier(.16,1,.3,1) .15s} html.js-motion .hero .hero-viz.reveal.rv-in{opacity:1;transform:none} /* one-time sheen sweeping across the gold headline word, after it settles */ .hero h1 span{ background:linear-gradient(100deg,var(--gold) 0%,var(--gold) 38%,#f7e2a6 50%,var(--gold) 62%,var(--gold) 100%); background-size:250% 100%; background-position:120% 0; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:heroSheen 2.4s cubic-bezier(.22,1,.36,1) .55s 1 both; } @keyframes heroSheen{ to{ background-position:0 0 } } /* The gold-sheen rule above also matches the comma wrapper , which tinted the comma gold. Force it back to normal text colour so only the highlighted word ("one place") stays gold. */ .hero h1 .hcma{ background:none !important; -webkit-background-clip:border-box; background-clip:border-box; color:var(--text) !important; -webkit-text-fill-color:var(--text) !important; animation:none !important; } @media(prefers-reduced-motion:reduce){ html.js-motion .hero .eyebrow.reveal, html.js-motion .hero h1.reveal, html.js-motion .hero .hero-lead.reveal, html.js-motion .hero .hero-us.reveal, html.js-motion .hero .hero-cta.reveal, html.js-motion .hero .hero-viz.reveal{filter:none;transform:none} .hero h1 span{animation:none;background:none;-webkit-text-fill-color:currentColor;color:var(--gold)} } /* ---- mobile ---- */ @media(max-width:900px){ .nav .wrap{height:64px;gap:10px} .mobile-menu{top:64px} /* 44px minimum touch target (WCAG 2.5.5) */ .icon-btn,.burger{width:44px;height:44px} .lang-btn{height:44px;padding:0 .75rem} .mobile-menu a{min-height:44px;display:flex;align-items:center} .mm-lang{min-height:44px;display:inline-flex;align-items:center} } @media(max-width:400px){ /* Icon-only language button so brand + 3 controls stay on ONE row at 320px. */ .lang-btn #langLabel{display:none} .lang-btn{width:44px;padding:0;justify-content:center} } @media(max-width:640px){ /* Announcement banner: one line, never two. Text shrinks rather than wraps. */ .topbanner{font-size:.74rem;gap:8px;white-space:nowrap;padding-inline:10px} /* Hero CTAs: identical width, identical height, single line each. */ .hero-cta{display:grid;grid-template-columns:1fr;gap:10px;width:100%;max-width:340px;margin-inline:auto} .hero-cta .btn{width:100%;justify-content:center;white-space:nowrap} .hero-cta .btn.lg{padding:.9rem 1rem;font-size:.94rem} /* Slightly smaller display type, while small text stays >= 12px for legibility. */ .hero h1{font-size:clamp(1.7rem,7.2vw,2.2rem);line-height:1.16} .hero-lead{font-size:.95rem} .hero-us{font-size:.88rem} .s-head h2{font-size:clamp(1.45rem,5.8vw,1.9rem)} .fcard h3{font-size:1rem} .fcard p{font-size:.88rem} .cc-tag{font-size:.75rem} .eyebrow{font-size:.68rem} } /* Motion-safe: entry animation must never hide content for reduced-motion users. */ @media(prefers-reduced-motion:reduce){ html.js-motion .reveal{opacity:1;transform:none} .pre-sun{animation:none} } /* ---- mobile tap targets + legibility floor (footer, banner, brand) ---- */ @media(max-width:640px){ .foot-col h5{font-size:.75rem} /* was .72rem = 11.5px */ .foot-col a{min-height:44px;display:flex;align-items:center} .brand{min-height:44px} /* No link in the banner any more, so no 44px tap-target requirement. */ .topbanner{min-height:36px;padding-block:.35rem} } /* ============================================================ NAV GROUPING, FULL-SCREEN MENU, ADVANCED CARD STYLING ============================================================ */ /* Brand absorbs the free space so the controls sit together instead of the burger drifting to the far edge (space-between used to strand it). */ .nav .wrap{justify-content:flex-start} .brand{margin-inline-end:auto} .nav-links{margin-inline:auto} .nav-actions{gap:10px} @media(max-width:900px){ .nav-links{margin-inline:0} .burger{margin-inline-start:10px} } /* ---- full-screen mobile menu ---- */ .mobile-menu{position:fixed;inset:0;top:0;width:100%;height:100dvh;max-height:none; background:var(--bg);border:0;box-shadow:none;padding:0;z-index:70;overflow:auto; flex-direction:column;gap:0} .mobile-menu.open{display:flex;animation:mmIn .28s cubic-bezier(.22,1,.36,1)} @keyframes mmIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}} html.menu-open{overflow:hidden} .mm-top{display:flex;align-items:center;justify-content:space-between; height:64px;padding-inline:clamp(16px,4vw,40px);border-bottom:1px solid var(--line);flex:none} .mm-top .brand{margin:0;font-size:1.15rem} .mm-close{width:44px;height:44px} .mm-links{display:flex;flex-direction:column;justify-content:center;flex:1; padding:clamp(16px,5vw,40px);gap:6px} .mm-links a{padding:.9rem .4rem;font-size:1.35rem;font-weight:800;color:var(--text); border-radius:12px;min-height:56px;display:flex;align-items:center; border-bottom:1px solid var(--line);text-decoration:none} .mm-links a:last-child{border-bottom:0} .mm-links a:hover,.mm-links a.nav-on{color:var(--gold);background:transparent} .mobile-menu > .btn.block{margin:0 clamp(16px,5vw,40px) calc(24px + env(safe-area-inset-bottom)); width:auto;min-height:52px} /* ---- stats: gradient ring, tabular numerals, even 2x2 on mobile ---- */ .stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:2.6rem} /* Borderless: the gradient ring drew a hard edge on every tile, so the strip read as four boxes instead of four figures. The surface alone separates them now. */ .hstat{position:relative;background:var(--panel); border:none;border-radius:20px;padding:1.75rem 1.35rem 1.55rem;text-align:center; min-width:0;overflow:hidden;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s} .hstat::after{content:"";position:absolute;inset-inline-start:-40%;top:-60%;width:60%;height:220%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); transform:skewX(-18deg);opacity:0;transition:opacity .3s} .hstat:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,0,0,.32)} .hstat:hover::after{opacity:1;animation:shine 1.1s ease} @keyframes shine{from{inset-inline-start:-40%}to{inset-inline-start:120%}} /* direction:ltr + isolate, or RTL bidi renders "16+" as "+16". */ /* Lining + tabular figures so the four numbers share one baseline and one advance width, which is what makes a stat strip read as measured rather than typed. Tracking eased off -.03em: at this size it was pulling the digits into each other. */ .hstat b{display:block;font-size:clamp(1.75rem,5vw,2.45rem);font-weight:800;color:var(--gold); line-height:1.04;letter-spacing:-.015em; font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1; direction:ltr;unicode-bidi:isolate} .hstat span{color:var(--muted);font-size:.8rem;line-height:1.5;margin-top:.7rem;display:block;text-wrap:balance} @media(max-width:640px){.stat-strip{grid-template-columns:1fr 1fr;gap:10px}} /* ---- feature cards: borderless, corner glow on hover, icon lift ---- Borderless, matching .choose-card and .src-card. The old treatment drew a 1px --line border at rest and swapped in a masked 1px gradient ring on hover; against the dark panel that ring read as a hard gold outline rather than a highlight. Separation now comes from the surface itself (a slight top-lighter gradient) plus depth on hover, and the accent arrives as a soft corner glow instead of an edge. */ .fcard{position:relative;border:none;border-radius:var(--r); background:linear-gradient(180deg,color-mix(in srgb,var(--panel2) 60%,var(--panel)),var(--panel)); padding:1.5rem;overflow:hidden;box-shadow:0 10px 26px -20px rgba(0,0,0,.9); transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s} /* Corner glow, not an outline. Sits behind the content (h3/p/.f-ic are position:relative). */ .fcard::before{content:"";position:absolute;inset-inline-end:-70px;top:-70px;width:190px;height:190px; border-radius:50%;background:radial-gradient(circle,rgba(224,182,74,.30),transparent 68%); filter:blur(26px);opacity:0;transition:opacity .35s,transform .35s;pointer-events:none} /* The glow is an absolutely-positioned pseudo-element, so it paints above non-positioned block content. Without this the blur would wash over the heading and body text. */ .fcard > *{position:relative;z-index:1} .fcard:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(0,0,0,.34)} .fcard:hover::before{opacity:.85;transform:scale(1.12)} /* The glow is decorative; the card must not animate for reduced-motion users. */ @media(prefers-reduced-motion:reduce){.fcard:hover{transform:none}.fcard:hover::before{transform:none}} .fcard .f-ic{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s} .fcard:hover .f-ic{transform:translateY(-2px) scale(1.06);box-shadow:0 10px 24px rgba(224,182,74,.18)} /* ---- everything-in-one-place cards ---- */ .aio-grid{gap:18px} /* Borderless, same reasoning as .fcard above: this card already carries .aio-ring as its corner glow, so the outline was a second competing edge. */ .aio-card{position:relative;border:none;border-radius:20px; background:linear-gradient(180deg,color-mix(in srgb,var(--panel2) 60%,var(--panel)),var(--panel)); padding:1.7rem 1.5rem;overflow:hidden;box-shadow:0 10px 26px -20px rgba(0,0,0,.9); transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s} .aio-card:hover{transform:translateY(-6px);box-shadow:0 24px 52px rgba(0,0,0,.34)} .aio-ring{position:absolute;inset-inline-end:-70px;top:-70px;width:190px;height:190px;border-radius:50%; background:radial-gradient(circle,rgba(224,182,74,.30),transparent 68%);filter:blur(26px); opacity:.55;pointer-events:none;transition:opacity .35s,transform .35s} .aio-card:hover .aio-ring{opacity:.9;transform:scale(1.12)} .aio-ic{position:relative;width:52px;height:52px;border-radius:15px;display:flex;align-items:center; justify-content:center;color:var(--gold);margin-bottom:1.1rem; background:linear-gradient(135deg,rgba(224,182,74,.18),rgba(47,191,135,.09)); border:none;transition:transform .3s cubic-bezier(.22,1,.36,1)} .aio-card:hover .aio-ic{transform:rotate(-6deg) scale(1.06)} .aio-ic svg{width:25px;height:25px} .aio-card h3{position:relative;font-size:1.12rem;margin-bottom:.5rem} .aio-card > p{position:relative;color:var(--muted);font-size:.92rem} .aio-card ul{position:relative;list-style:none;margin-top:1.1rem;display:flex;flex-direction:column;gap:.6rem} .aio-card li{display:flex;gap:9px;align-items:flex-start;color:var(--text);font-size:.88rem;opacity:.9} .aio-ck{flex:none;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center; justify-content:center;background:rgba(47,191,135,.14);color:var(--green);margin-top:2px} .aio-ck svg{width:11px;height:11px} @media(max-width:900px){.aio-grid{grid-template-columns:1fr}} .foot-credit{font-size:.75rem;color:var(--muted);opacity:.7;margin-bottom:.6rem;text-align:center} .foot-credit a{color:var(--muted);text-decoration:underline;text-underline-offset:2px} .foot-credit a:hover{color:var(--gold)} /* ============================================================ Features page expansion (2026-07-10): equal-height cards, bidi-safe mixed runs, plan comparison table, page mocks. ============================================================ */ .grid .fcard{display:flex;flex-direction:column;height:100%} .fcard h3,.fcard p{text-align:start;unicode-bidi:isolate} .fcard .f-mock{margin-top:auto;padding-top:1rem} .countdown{flex-wrap:wrap} /* review mock: owner reply bubble */ .rev-reply{margin-top:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;font-size:.82rem;color:var(--muted)} .rev-reply b{display:block;font-size:.72rem;color:var(--gold);margin-bottom:2px} /* analytics mock bars */ .mbar{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--muted)} .mbar+.mbar{margin-top:7px} .mbar .mb-l{flex:none;width:86px} .mbar .mb-t{flex:1;height:7px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);overflow:hidden} .mbar .mb-f{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--green))} .mbar b{color:var(--text);font-variant-numeric:tabular-nums} /* plan comparison table: wide content scrolls inside its wrapper, never the page */ .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)} .cmp{width:100%;min-width:620px;border-collapse:collapse;font-size:.88rem} .cmp th,.cmp td{padding:.75rem 1rem;text-align:start;border-bottom:1px solid var(--line)} .cmp thead th{background:var(--panel2);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap} .cmp thead th b{display:block;color:var(--text);font-size:1rem;letter-spacing:0;text-transform:none} .cmp thead th.hot b{color:var(--gold)} .cmp thead th .cmp-note{font-weight:600} .cmp tbody tr:last-child td{border-bottom:none} .cmp td.c,.cmp th.c{text-align:center} .cmp td.c svg{width:16px;height:16px;vertical-align:middle} .cmp .ok{color:var(--green)} .cmp .no{color:var(--muted);opacity:.45} /* ============================================================ Features page: scroll-driven staggered "flow" (2026-07-11) Different layout (offset bento rhythm) + a real scroll effect: cards rise & fade in on entry, and a soft gold glow tracks each card through the viewport. Uses the independent translate/scale properties so the :hover lift still composes. Falls back to the site's existing .reveal one-shot where scroll-driven animations aren't supported, and to fully-visible for reduced motion. ============================================================ */ .flow{gap:22px} .flow .fcard{position:relative;border-radius:calc(var(--r) + 6px); background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 5%,var(--panel)),var(--panel))} .flow .fcard>*{position:relative;z-index:1} .flow .fcard::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0; background:radial-gradient(130% 90% at 50% -12%,rgba(224,182,74,.16),transparent 62%)} .flow .fcard .f-ic{box-shadow:0 8px 22px rgba(224,182,74,.10)} /* Flow cards reveal through the shared .reveal/.rv-in system (site.js MOTION_SEL already includes .fcard), so they animate on scroll on EVERY page, Safari included. The old Chromium-only animation-timeline:view() effect and the editorial margin stagger were removed here because they broke alignment and never revealed in Safari. */ /* Hide image source/credit chips (no source mention on imagery) */ .kband-credit,.kbx-credit{display:none!important} /* ---- Giveaway promo (app-style card on the real C43 photo) ---- */ .gvp-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:22px;padding:26px 22px;background:linear-gradient(150deg,var(--panel) 0%,var(--panel2) 100%)} .gvp-orbs{position:absolute;inset:0;pointer-events:none;z-index:0} .gvp-orbs span{position:absolute;border-radius:50%;filter:blur(46px);opacity:.5} .gvp-orbs span:first-child{width:260px;height:260px;background:radial-gradient(circle,var(--gold),transparent 70%);top:-90px;inset-inline-end:-60px} .gvp-orbs span:last-child{width:220px;height:220px;background:radial-gradient(circle,var(--green),transparent 70%);bottom:-100px;inset-inline-start:-50px;opacity:.28} .gvp-visual{position:absolute;inset:0;margin:0;border:0;border-radius:0;overflow:hidden;pointer-events:none} .gvp-visual::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(0deg,rgba(4,6,8,.92),rgba(4,6,8,.76) 50%,rgba(4,6,8,.88)),radial-gradient(120% 130% at 50% 42%,transparent 38%,rgba(4,6,8,.62))} .gvp-visual img{width:100%;height:100%;object-fit:cover;object-position:center 70%;display:block} .gvp-visual::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.1;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,");background-size:140px 140px} .gvp-body{position:relative;z-index:1} .gvp-kick{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line2);border-radius:999px;padding:5px 12px} .gvp-kick svg{width:14px;height:14px} .gvp-title{margin:.7rem 0 .3rem;font-size:clamp(1.5rem,5vw,2.2rem);line-height:1.12;text-wrap:balance} .gvp-sub{color:var(--muted);margin:0 0 1.1rem;max-width:52ch;text-wrap:pretty} .gvp-pill{display:inline-flex;align-items:center;gap:6px;margin:.1rem 0 1.1rem;padding:.32rem .7rem;border-radius:999px;font-size:.74rem;font-weight:800;letter-spacing:.01em;color:var(--gold2);background:color-mix(in srgb,var(--gold) 14%,transparent);border:1px solid color-mix(in srgb,var(--gold) 34%,var(--line2))} .gvp-pill svg{width:14px;height:14px;flex:none} .gvp-prizes{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:1.3rem;align-items:stretch} .gvp-prize{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--panel);min-height:62px} .gvp-p1{border-color:color-mix(in srgb,var(--gold) 55%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 22%,transparent) inset} .gvp-tier{flex:none;min-width:44px;padding:5px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:11px;background:var(--panel2);color:var(--gold)} .gvp-ic{display:block;line-height:0} .gvp-ic svg{width:22px;height:22px;display:block} .gvp-ord{font-size:.58rem;font-weight:800;line-height:1;letter-spacing:.02em;opacity:.9} .gvp-p1 .gvp-tier{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#231a05} .gvp-p2 .gvp-ic{color:#cbd5db} .gvp-p3 .gvp-ic{color:#cd9b6a} .gvp-pname{font-weight:500;font-size:.9rem;line-height:1.28;min-width:0;overflow-wrap:anywhere} .gvp-howtitle{font-weight:800;font-size:.95rem;margin:0 0 .7rem;letter-spacing:-.01em} .gvp-groups{display:grid;gap:.8rem;align-items:stretch;margin-bottom:.4rem} .gvp-grp{display:flex;flex-direction:column;background:color-mix(in srgb,var(--panel2) 60%,transparent);border:1px solid var(--line);border-radius:14px;padding:.85rem .95rem} .gvp-grp-h{display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gold2);margin:0 0 .6rem;padding-bottom:.55rem;border-bottom:1px solid var(--line2)} .gvp-grp-h svg{width:15px;height:15px;flex:none;color:var(--gold)} .gvp-ways{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .gvp-grp .gvp-ways{margin:0} .gvp-ways li{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:600;font-size:.92rem;min-height:24px} .gvp-ways li svg{flex:none;width:20px;height:20px;color:var(--gold)} .gvp-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:.9rem} .gvp-draw{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-weight:700;font-size:.88rem} .gvp-draw svg{width:16px;height:16px;color:var(--gold)} .gvp-draw b{color:var(--text)} .gvp-cta{margin-inline-start:auto;border:none;cursor:pointer;font:inherit;font-weight:800;color:#231a05;background:linear-gradient(135deg,var(--gold),var(--gold2));border-radius:12px;padding:12px 18px;display:inline-block;text-decoration:none;text-align:center;transition:transform .15s,filter .15s} .gvp-cta:hover{transform:translateY(-1px);filter:brightness(1.05)} .gvp-fine{margin:1rem 0 0;color:var(--muted);font-size:.76rem;opacity:.9} @media(min-width:640px){.gvp-groups{grid-template-columns:1fr 1fr}} @media(min-width:720px){.gvp-card{padding:34px 32px}.gvp-prizes{grid-template-columns:repeat(3,1fr)}} @media(min-width:860px){.gvp-card{padding:42px 40px}} @media(max-width:600px){.gvp-foot{justify-content:center}.gvp-cta,[dir="rtl"] .gvp-cta{margin-inline:auto;width:100%}} /* The card ALWAYS sits on the dark car photo + scrim, so overlaid text stays light in both themes. */ .gvp-card .gvp-title{color:#fff} .gvp-card .gvp-sub,.gvp-card .gvp-howtitle,.gvp-card .gvp-fine,.gvp-card .gvp-draw{color:rgba(255,255,255,.82)} .gvp-card .gvp-draw b{color:#fff} .gvp-card .gvp-pname{color:#fff} .gvp-card .gvp-ways li{color:rgba(255,255,255,.92)} .gvp-card .gvp-prize{background:rgba(10,12,14,.55);border-color:rgba(255,255,255,.14)} .gvp-card .gvp-p1{border-color:color-mix(in srgb,var(--gold) 55%,transparent)} .gvp-card .gvp-tier{background:rgba(255,255,255,.12);color:var(--gold2)} .gvp-card .gvp-p1 .gvp-tier{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#231a05} .gvp-card .gvp-grp{background:rgba(10,12,14,.5);border-color:rgba(255,255,255,.14)} .gvp-card .gvp-grp-h{color:#e6be5a;border-bottom-color:rgba(255,255,255,.16)} .gvp-card .gvp-kick{color:#e6be5a;border-color:rgba(255,255,255,.22)} .gvp-card .gvp-pill{color:#f0d488} /* ===== Hero: responsive rhythm + the connection visual ===== The headline previously carried a hardcoded
, which fought text-wrap:balance and stranded the comma on its own line at some widths. The
is gone; balance now picks the break per viewport. The highlighted phrase is kept whole. */ .hero .wrap.center{max-width:min(1180px,95vw);padding-inline:clamp(1rem,4vw,2rem)} .hero h1{ font-size:clamp(2.3rem,1.3rem + 4.4vw,4.6rem); line-height:1.05;letter-spacing:-.015em; margin:clamp(1rem,2.6vw,1.6rem) 0 clamp(.9rem,2.2vw,1.3rem); text-wrap:balance; max-width:20ch;margin-inline:auto; /* stops 4-5 word orphan lines on wide screens */ overflow-wrap:break-word} .hero h1 span{white-space:nowrap} /* "one place" never splits */ .hero .hero-lead{ font-size:clamp(1rem,.94rem + .42vw,1.16rem); line-height:1.6;max-width:56ch;margin-inline:auto;text-wrap:pretty} .hero .hero-us{ max-width:50ch;margin-block:.85rem 0; font-size:.98rem;font-weight:600;letter-spacing:.005em; text-align:center;text-wrap:pretty; color:color-mix(in oklab,var(--gold) 60%,var(--text));opacity:.92} @media(max-width:520px){ .hero h1{max-width:14ch;line-height:1.12} .hero .hero-lead{font-size:1rem;line-height:1.58} } /* --- animated connection visual: Kurdistan <-> the Kurdish world --- */ .hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .hv-lbl{position:absolute;bottom:2%;font-size:11px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:color-mix(in oklab,var(--text) 74%,transparent);transform:translateX(-50%)} .hv-home{inset-inline-start:11%} .hv-world{inset-inline-start:89%;color:color-mix(in oklab,var(--gold) 82%,var(--text))} /* ---------- scrollytelling story timeline (the "ways to earn") ---------- */ .story{position:relative;max-width:820px;margin:clamp(1.6rem,4vw,3rem) auto 0} .story-rail{position:absolute;inset-block:44px 44px;inset-inline-start:26px;width:2px; background:color-mix(in oklab,var(--gold) 14%,var(--line));border-radius:2px;overflow:hidden} .story-fill{position:absolute;inset-inline:0;top:0;height:0;border-radius:2px; background:linear-gradient(var(--gold),var(--green));box-shadow:0 0 12px color-mix(in oklab,var(--gold) 55%,transparent)} .story-step{position:relative;display:grid;grid-template-columns:54px 1fr;gap:clamp(16px,2.6vw,30px); align-items:start;padding-block:clamp(22px,4vw,44px)} .story-node{width:54px;height:54px;flex:none;display:grid;place-items:center;border-radius:50%; background:var(--panel);border:1px solid var(--line2);color:var(--muted);position:relative;z-index:2; transition:color .45s ease,border-color .45s ease,background .45s ease,box-shadow .45s ease,transform .45s cubic-bezier(.16,1,.3,1)} .story-node svg{width:24px;height:24px} .story-step.on .story-node{color:var(--gold);border-color:var(--gold);transform:scale(1.06); background:color-mix(in oklab,var(--gold) 12%,var(--panel)); box-shadow:0 0 0 5px color-mix(in oklab,var(--gold) 9%,transparent),0 0 26px -4px color-mix(in oklab,var(--gold) 65%,transparent)} .story-body{padding-top:5px} .story-n{display:block;font-size:.78rem;font-weight:800;letter-spacing:.14em;margin-bottom:3px; color:color-mix(in oklab,var(--gold) 68%,var(--muted))} .story-body h3{font-size:clamp(1.18rem,2.5vw,1.6rem);margin:0 0 .4rem;letter-spacing:-.01em} .story-body p{color:var(--muted);line-height:1.66;max-width:54ch;margin:0} /* reveal via the site-wide .reveal/.rv-in system (proven IntersectionObserver) so the steps are NEVER stuck invisible if the scroll-progress handler misbehaves */ html.js-motion .story-step.reveal{opacity:0;transform:translateY(38px);filter:blur(7px); transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1),filter .8s ease} html.js-motion .story-step.reveal.rv-in{opacity:1;transform:none;filter:blur(0)} @media(prefers-reduced-motion:reduce){html.js-motion .story-step.reveal{opacity:1;transform:none;filter:none}} @media(max-width:520px){ .story-step{grid-template-columns:44px 1fr;gap:14px} .story-node{width:44px;height:44px}.story-node svg{width:20px;height:20px} .story-rail{inset-inline-start:21px} } .hero-viz{position:relative;width:min(780px,92vw);margin:clamp(1.8rem,4vw,2.8rem) auto 0; aspect-ratio:620/150;pointer-events:none;user-select:none} .hero-viz svg{width:100%;height:100%;overflow:visible;display:block} /* Arc: brighter, thicker, softly glowing so the connection reads as intentional rather than a faint hairline. */ .hero-viz .arc{fill:none;stroke:var(--gold);stroke-width:1.6;opacity:.62; stroke-dasharray:5 7;animation:hv-flow 5.5s linear infinite; filter:drop-shadow(0 0 3px color-mix(in oklab,var(--gold) 45%,transparent))} .hero-viz .arc.b{animation-duration:7s;opacity:.44} .hero-viz .arc.c{animation-duration:9s;opacity:.34} .hero-viz .base{fill:none;stroke:color-mix(in oklab,var(--gold) 20%,var(--line2));stroke-width:1.2;opacity:.6} .hero-viz .node{fill:var(--gold);filter:drop-shadow(0 0 5px color-mix(in oklab,var(--gold) 75%,transparent))} .hero-viz .node.far{fill:var(--green);filter:drop-shadow(0 0 5px color-mix(in oklab,var(--green) 75%,transparent))} .hero-viz .halo{fill:none;stroke:var(--gold);stroke-width:1.2;opacity:0; transform-box:fill-box;transform-origin:center;animation:hv-pulse 3.4s ease-out infinite} .hero-viz .halo.far{stroke:var(--green)} .hero-viz .n2 .halo{animation-delay:.85s} .hero-viz .n3 .halo{animation-delay:1.7s} .hero-viz .n4 .halo{animation-delay:2.55s} .hero-viz .lbl{fill:color-mix(in oklab,var(--text) 74%,transparent);font-size:11px;font-weight:700;letter-spacing:.06em; text-anchor:middle;text-transform:uppercase} .hero-viz .lbl.dest{fill:color-mix(in oklab,var(--gold) 82%,var(--text))} .hero-viz .spark{fill:var(--gold2);opacity:1; filter:drop-shadow(0 0 4px color-mix(in oklab,var(--gold) 80%,transparent)); animation:hv-travel 5.5s cubic-bezier(.45,0,.55,1) infinite} .hero-viz .spark.b{animation-duration:7s;animation-delay:1.2s;fill:var(--green); filter:drop-shadow(0 0 4px color-mix(in oklab,var(--green) 80%,transparent))} @keyframes hv-flow{to{stroke-dashoffset:-96}} @keyframes hv-pulse{ 0%{opacity:.55;transform:scale(.6)} 70%{opacity:0;transform:scale(2.6)} 100%{opacity:0;transform:scale(2.6)}} @keyframes hv-travel{ 0%{offset-distance:0%;opacity:0} 8%{opacity:.95} 92%{opacity:.95} 100%{offset-distance:100%;opacity:0}} @media(max-width:520px){ .hero-viz{width:94vw;aspect-ratio:620/170} .hero-viz .lbl{font-size:13px} } /* Motion is decoration, never information. */ @media(prefers-reduced-motion:reduce){ .hero-viz .arc,.hero-viz .halo,.hero-viz .spark{animation:none} .hero-viz .arc{stroke-dasharray:none;opacity:.3} .hero-viz .spark{opacity:0} } /* ---- giveaway: the three rewards, stated before the mechanics ---- */ .gv-rewards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:14px;margin:1.4rem auto 1.6rem;max-width:1000px} .gv-rw{background:linear-gradient(160deg,var(--panel),var(--panel2)); border:1px solid var(--line2);border-radius:16px;padding:1.15rem 1.2rem; display:flex;flex-direction:column;gap:.4rem;text-align:start} .gv-rw-ic{width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center; justify-content:center;background:color-mix(in oklab,var(--gold) 14%,transparent); color:var(--gold);border:1px solid color-mix(in oklab,var(--gold) 28%,transparent); margin-bottom:.25rem} .gv-rw-ic svg{width:21px;height:21px} .gv-rw b{font-size:1rem;font-weight:800;letter-spacing:-.01em} .gv-rw span:last-child{color:var(--muted);font-size:.9rem;line-height:1.55;text-wrap:pretty} @media(max-width:560px){.gv-rewards{gap:11px;margin:1.1rem auto 1.3rem} .gv-rw{padding:1rem}.gv-rw b{font-size:.96rem}} /* ===== Staggered card reveal (scrollytelling) ===== The existing .reveal/.rv-in system fires whole elements at once, and items scrolled into view got show(el,0), so a grid of cards popped simultaneously. Here the CONTAINER is observed and its children cascade via nth-child delays, so each card lands one after another. Pure CSS delays: no per-node JS. Gated on html.js-motion so a no-JS page still shows everything. */ html.js-motion .rv-stagger > *{ opacity:0;transform:translateY(22px) scale(.988); transition:opacity .62s cubic-bezier(.22,1,.36,1),transform .62s cubic-bezier(.22,1,.36,1)} html.js-motion .rv-stagger.rv-in > *{opacity:1;transform:none} html.js-motion .rv-stagger.rv-in > *:nth-child(1){transition-delay:.02s} html.js-motion .rv-stagger.rv-in > *:nth-child(2){transition-delay:.10s} html.js-motion .rv-stagger.rv-in > *:nth-child(3){transition-delay:.18s} html.js-motion .rv-stagger.rv-in > *:nth-child(4){transition-delay:.26s} html.js-motion .rv-stagger.rv-in > *:nth-child(5){transition-delay:.34s} html.js-motion .rv-stagger.rv-in > *:nth-child(6){transition-delay:.42s} html.js-motion .rv-stagger.rv-in > *:nth-child(7){transition-delay:.50s} html.js-motion .rv-stagger.rv-in > *:nth-child(8){transition-delay:.58s} html.js-motion .rv-stagger.rv-in > *:nth-child(9){transition-delay:.66s} html.js-motion .rv-stagger.rv-in > *:nth-child(n+10){transition-delay:.72s} /* Card polish: a light edge that warms on hover, and a lift. Kept subtle so it reads as depth rather than decoration. */ .fcard{transition:transform .28s cubic-bezier(.22,1,.36,1),border-color .28s,box-shadow .28s; position:relative} @media(hover:hover){ .fcard:hover{transform:translateY(-4px); border-color:color-mix(in oklab,var(--gold) 34%,var(--line2)); box-shadow:0 18px 44px rgba(0,0,0,.34),0 0 0 1px color-mix(in oklab,var(--gold) 12%,transparent)} .fcard:hover .f-ic,.fcard:hover .fc-ic{ color:var(--gold2); box-shadow:0 0 0 1px color-mix(in oklab,var(--gold) 34%,transparent), 0 8px 26px color-mix(in oklab,var(--gold) 20%,transparent)} } .fcard .f-ic,.fcard .fc-ic{transition:color .28s,box-shadow .28s} @media(prefers-reduced-motion:reduce){ html.js-motion .rv-stagger > *{opacity:1;transform:none;transition:none} .fcard,.fcard .f-ic,.fcard .fc-ic{transition:none} @media(hover:hover){.fcard:hover{transform:none}} } /* Progressive image loading (paired with imgFade() in site.js). The shimmer holds the image's space while it decodes; the image fades in on load. Scoped to .img-fx so no-JS pages are unaffected, and the motion is gated so reduced-motion users get the image instantly, no fade. */ .img-fx .img-lazy:not(.is-loaded){ background-image:linear-gradient(100deg,var(--panel) 30%,var(--panel2) 50%,var(--panel) 70%); background-size:200% 100%;background-repeat:no-repeat; } @media (prefers-reduced-motion:no-preference){ .img-fx .img-lazy{opacity:0;transition:opacity .6s ease} .img-fx .img-lazy.is-loaded{opacity:1} .img-fx .img-lazy:not(.is-loaded){animation:imgShimmer 1.5s linear infinite} } @keyframes imgShimmer{to{background-position:-200% 0}} /* ---- sponsorship/boost mockup: gold border + Sponsored tag preview (desktop + phone frames). Same pattern as the business dashboard's Boost tab, ported here for the marketing pages. */ .bp-row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;justify-content:center} .bp-frame{background:var(--panel2);border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:0 14px 32px -22px rgba(0,0,0,.7)} .bp-desktop{flex:1 1 320px;max-width:420px} .bp-phone{flex:0 0 168px;width:168px} .bp-bar{display:flex;gap:5px;padding:8px 10px;background:var(--panel);border-bottom:1px solid var(--line2)} .bp-bar i{width:7px;height:7px;border-radius:50%;background:var(--line2)} .bp-notch{height:16px;background:var(--panel);border-bottom:1px solid var(--line2);position:relative} .bp-notch::after{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);width:44px;height:6px;border-radius:99px;background:var(--line2)} .bp-body{display:flex;flex-direction:column;gap:8px;padding:10px} .bp-card{position:relative;display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;border:1px solid var(--line2);background:var(--panel)} .bp-card.spon{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 8%,var(--panel))} .bp-thumb{width:30px;height:30px;border-radius:8px;background:var(--line2);flex:none} .bp-card.spon .bp-thumb{background:color-mix(in srgb,var(--gold) 30%,var(--line2))} .bp-g{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0} .bp-g b{display:block;height:7px;width:70%;border-radius:4px;background:var(--line2)} .bp-g i{display:block;height:6px;width:45%;border-radius:4px;background:var(--line2);opacity:.7} .bp-card.spon .bp-g b,.bp-card.spon .bp-g i{background:color-mix(in srgb,var(--gold) 40%,var(--line2))} .bp-tag{position:absolute;top:-7px;inset-inline-end:8px;font-size:.6rem;font-weight:800;letter-spacing:.03em;color:#231a05;background:var(--gold);padding:.1rem .5rem;border-radius:99px} /* ===== Kurdify AI section (ported from the app 2026-07-24: proof bar, chat mockup, skills, comparison, agents). Strings are wired via data-i18n in site.js. ===== */ .app-suite{margin-top:3.2rem;padding-top:2.6rem;border-top:1px solid var(--line)} .suite-wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:clamp(14px,2vw,24px);margin-top:1.4rem} .px-side{flex:1 1 340px;max-width:500px;display:flex;flex-direction:column;justify-content:center;gap:14px} @media(max-width:820px){.suite-phone{margin-inline:auto}} .suite-phone{position:relative;width:264px;padding:44px 18px 34px;border-radius:40px;background:linear-gradient(165deg,var(--panel2),var(--panel));border:1px solid var(--line2);box-shadow:0 30px 60px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05)} .spx-island{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:84px;height:20px;border-radius:100px;background:#060d10} .sp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .sp-app{aspect-ratio:1;border-radius:24%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#0d1619} .sp-app svg{width:26px;height:26px} .sp-app em{font-style:normal;font-size:.5rem;font-weight:800;letter-spacing:.02em;opacity:.85} .sp-c1{background:linear-gradient(150deg,var(--gold2),var(--gold))} .sp-c2{background:linear-gradient(150deg,#e8907e,#d96a5c);color:#2a0f0a} .sp-c3{background:linear-gradient(150deg,#43c99a,#1f9d6b);color:#04140d} .sp-c4{background:linear-gradient(150deg,#9fb8c9,#6f8a9d);color:#0d1a22} .sp-app.lk{background:color-mix(in srgb,var(--panel2) 80%,transparent);border:1px dashed var(--line2);color:var(--muted)} .sp-app.lk svg{width:18px;height:18px;opacity:.7} .sp-note{margin-top:14px;text-align:center;font-size:.68rem;font-weight:700;color:var(--muted)} .suite-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:640px){.suite-cards{grid-template-columns:1fr}} .suite-card{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1rem 1.1rem;transition:border-color .15s,transform .15s} .suite-card:hover{border-color:color-mix(in srgb,var(--gold) 40%,var(--line2));transform:translateY(-1px)} .sc-ic{width:44px;height:44px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center} .sc-ic svg{width:22px;height:22px} .suite-card b{display:block;font-size:.95rem;margin-bottom:.25rem} .suite-card p{margin:0;font-size:.83rem;line-height:1.65;color:var(--muted);text-wrap:pretty} .suite-locked{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.8rem 1rem;border:1px dashed color-mix(in srgb,var(--gold) 30%,var(--line2));border-radius:14px;color:var(--muted);font-size:.85rem;font-weight:700;background:color-mix(in srgb,var(--gold) 4%,transparent)} .suite-locked svg{width:16px;height:16px;color:var(--gold2);flex:none} /* Kurdify AI: "why better than ChatGPT" comparison + specialist agents grid */ .pcmp{margin-top:2.6rem} .pcmp-h{text-align:center;font-size:clamp(1.3rem,3.4vw,1.8rem);font-weight:800;text-wrap:balance;margin:0 0 1.25rem} .pcmp-table{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:940px;margin-inline:auto} .pcmp-colh{display:flex;align-items:center;justify-content:center;gap:9px;font-weight:800;font-size:.98rem;padding:12px 14px;border-radius:12px} .pcmp-colh svg{width:18px;height:18px;flex:none} .pcmp-us{background:color-mix(in srgb,var(--gold) 14%,var(--panel));border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));color:var(--gold2)} .pcmp-them{background:var(--panel2);border:1px solid var(--line);color:var(--muted)} .pcmp-cell{display:flex;align-items:flex-start;gap:9px;padding:13px 15px;border-radius:12px;font-size:.9rem;font-weight:600;line-height:1.42;text-wrap:pretty} .pcmp-cell svg{width:17px;height:17px;flex:none;margin-top:1px} .pcmp-yes{background:color-mix(in srgb,var(--gold) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--gold) 26%,var(--line));color:var(--text)} .pcmp-yes svg{color:var(--green)} .pcmp-no{background:var(--panel2);border:1px solid var(--line);color:var(--muted)} .pcmp-no svg{color:color-mix(in srgb,#e0685c 80%,var(--muted))} .pag{margin-top:2.8rem} .pag-h{text-align:center;font-size:clamp(1.3rem,3.4vw,1.8rem);font-weight:800;text-wrap:balance;margin:0 0 .3rem} .pag-sub{text-align:center;color:var(--muted);margin:0 auto 1.35rem;max-width:52ch;text-wrap:pretty} .pag-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:820px;margin-inline:auto} .pag-card{display:inline-flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 16px 7px 8px;transition:border-color .18s,transform .18s,box-shadow .18s;cursor:default} .pag-card:hover{border-color:color-mix(in srgb,var(--gold) 48%,var(--line));transform:translateY(-2px);box-shadow:0 8px 20px -12px rgba(224,182,74,.5)} .pag-ic{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--gold) 15%,var(--panel2));color:var(--gold);flex:none} .pag-ic svg{width:18px;height:18px} .pag-card b{font-size:.92rem;white-space:nowrap} @media(max-width:560px){.pcmp-cell{padding:11px 12px;font-size:.83rem;gap:7px}.pcmp-colh{font-size:.88rem;padding:10px}.pag-card{padding:6px 13px 6px 7px}.pag-card b{font-size:.86rem}.pag-ic{width:28px;height:28px}.pag-ic svg{width:16px;height:16px}} /* Kurdify AI chat mockup: styled like a real app screen (status bar, app bar, chat, input) */ .px-phone{width:300px;padding:0;overflow:hidden;background:linear-gradient(180deg,#0c1417,#0a1013);display:flex;flex-direction:column} .px-phone .spx-island{display:none} .px-status{display:flex;align-items:center;justify-content:space-between;padding:13px 22px 7px;color:var(--text)} .px-time{font-size:.74rem;font-weight:800;letter-spacing:.01em} .px-stat-ic{display:inline-flex;align-items:center;gap:6px} .px-stat-ic svg{height:11px;width:auto;color:var(--text)} .px-stat-ic svg:nth-child(3){height:12px} .px-appbar{display:flex;align-items:center;gap:10px;padding:6px 16px 12px;border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent)} .px-logo{width:34px;height:34px;border-radius:11px;background:linear-gradient(150deg,var(--gold2),var(--gold));color:#231a05;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 4px 12px -4px rgba(224,182,74,.6)} .px-logo svg{width:19px;height:19px} .px-abtx{display:flex;flex-direction:column;gap:1px;min-width:0} .px-abtx b{font-size:.92rem;line-height:1.2} .px-abmenu{width:18px;height:18px;color:var(--muted);margin-inline-start:auto;flex:none} .px-live{display:inline-flex;align-items:center;gap:5px;font-size:.62rem;font-weight:700;color:var(--green)} .px-live i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:dsnBeat 2.4s ease-out infinite;flex:none} .px-live em{font-style:normal} .px-chat{display:flex;flex-direction:column;gap:12px;padding:16px 14px} .px-row{display:flex;align-items:flex-end;gap:7px} .px-ru{justify-content:flex-start} .px-ra{justify-content:flex-end} .px-aic{width:26px;height:26px;border-radius:9px;flex:none;background:linear-gradient(150deg,var(--gold2),var(--gold));color:#231a05;display:flex;align-items:center;justify-content:center;order:2} .px-aic svg{width:15px;height:15px} .px-b{max-width:78%;padding:.6rem .8rem;border-radius:16px;font-size:.76rem;line-height:1.72;text-wrap:pretty;position:relative} .px-u{background:color-mix(in srgb,var(--gold) 15%,var(--panel2));border:1px solid color-mix(in srgb,var(--gold) 24%,transparent);border-end-start-radius:5px} .px-a{background:linear-gradient(155deg,color-mix(in srgb,var(--green) 8%,var(--panel2)),var(--panel2));border:1px solid var(--line2);border-end-end-radius:5px;display:flex;flex-direction:column;gap:4px} .px-time2{font-size:.55rem;color:var(--muted);align-self:flex-end;opacity:.75} .px-council{display:flex;align-items:center;gap:7px;align-self:flex-end;font-size:.6rem;color:var(--muted);font-weight:700;padding-inline-end:4px} .px-council em{font-style:normal} .px-avs{display:inline-flex;flex-direction:row-reverse} .pxv{width:17px;height:17px;border-radius:50%;font-style:normal;font-size:.5rem;font-weight:900;color:#0c1417;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--panel);margin-inline-start:-5px} .pxv1{background:var(--gold)}.pxv2{background:var(--green)}.pxv3{background:#9fb8c9} /* council of AI brains: the top models each weigh in, then Kurdify AI merges the best answer */ .px-brains{align-self:stretch;background:color-mix(in srgb,var(--text) 3%,var(--panel2));border:1px solid var(--line2);border-radius:13px;padding:8px 9px;display:flex;flex-direction:column;gap:6px} .px-brains-h{display:flex;align-items:center;gap:6px;font-size:.56rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)} .px-brains-h .px-avs{margin-inline-end:3px} .px-brain{display:flex;align-items:center;gap:7px;font-size:.66rem;color:var(--text);line-height:1.35} .pxb-name{flex:none;font-weight:900;font-size:.54rem;border-radius:6px;padding:2px 6px;color:#0c1417;letter-spacing:.02em} .pxb-name.pxn1{background:var(--gold)}.pxb-name.pxn2{background:var(--green)}.pxb-name.pxn3{background:#9fb8c9} .px-best{font-size:.55rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--green)} /* Live "council thinking": each model's name-chip glows in turn (GPT -> Claude -> Gemini). */ .pxb-name{position:relative;animation:pxThink 3.6s ease-in-out infinite} .px-brain:nth-child(1) .pxb-name{animation-delay:0s} .px-brain:nth-child(2) .pxb-name{animation-delay:.5s} .px-brain:nth-child(3) .pxb-name{animation-delay:1s} @keyframes pxThink{0%,70%,100%{box-shadow:0 0 0 0 transparent;filter:none}12%,30%{box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent);filter:brightness(1.12)}} /* Consensus merge bar: the three answers converge into one decisive reply. */ .px-merge{display:flex;align-items:center;gap:7px;margin-top:1px} .px-merge-bar{flex:1;height:4px;border-radius:100px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden;position:relative} .px-merge-bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:100px;background:linear-gradient(90deg,var(--gold),var(--green));animation:pxMerge 3.6s ease-in-out infinite} html[dir="rtl"] .px-merge-bar i{inset:0 0 0 auto} @keyframes pxMerge{0%{width:0;opacity:.5}55%{width:100%;opacity:1}80%,100%{width:100%;opacity:1}} .px-merge-lbl{display:inline-flex;align-items:center;gap:4px;flex:none;font-size:.55rem;font-weight:800;color:var(--green);letter-spacing:.02em} .px-merge-lbl svg{width:9px;height:9px} /* Rich result card inside the assistant answer: a real Kurdify listing preview. */ .px-result{margin:5px 0 2px;background:color-mix(in srgb,var(--text) 4%,var(--panel));border:1px solid var(--line2);border-radius:12px;padding:8px 9px;display:flex;flex-direction:column;gap:7px} .px-result-top{display:flex;align-items:center;justify-content:space-between;gap:8px} .px-result-name{font-size:.74rem;font-weight:800;color:var(--text)} .px-rate{display:inline-flex;align-items:center;gap:3px;flex:none;font-size:.64rem;font-weight:900;color:var(--gold2)} .px-rate svg{width:11px;height:11px;color:var(--gold)} .px-result-meta{display:flex;flex-wrap:wrap;gap:5px} .px-chip{display:inline-flex;align-items:center;gap:4px;font-size:.54rem;font-weight:800;color:var(--muted);background:color-mix(in srgb,var(--text) 6%,transparent);border:1px solid var(--line2);border-radius:100px;padding:2px 7px;letter-spacing:.01em} .px-chip-off{color:#231a05;background:linear-gradient(135deg,var(--gold2),var(--gold));border-color:transparent} .px-chip-open{color:var(--green);border-color:color-mix(in srgb,var(--green) 40%,var(--line2))} .px-chip-open i{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green);animation:dsnBeat 2.4s ease-out infinite} @media(prefers-reduced-motion:reduce){.pxb-name,.px-merge-bar i,.px-chip-open i{animation:none}.px-merge-bar i{width:100%}} .px-inbar{margin-top:auto;padding:10px 12px 14px;border-top:1px solid color-mix(in srgb,var(--text) 7%,transparent);display:flex;flex-direction:column;gap:9px} .px-tools{display:flex;justify-content:center;gap:7px} .px-tools span{display:inline-flex;align-items:center;gap:5px;font-size:.62rem;font-weight:700;color:var(--muted);border:1px solid var(--line2);border-radius:100px;padding:.3rem .7rem;background:color-mix(in srgb,var(--text) 3%,transparent)} .px-tools svg{width:12px;height:12px} .px-tools em{font-style:normal} .px-field{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line2);border-radius:100px;padding:.5rem .5rem .5rem .95rem} .px-ph{flex:1;font-size:.72rem;color:var(--muted);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .px-send{width:30px;height:30px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#231a05;display:flex;align-items:center;justify-content:center} .px-send svg{width:15px;height:15px} html[dir="rtl"] .px-send svg{transform:scaleX(-1)} .px-side{grid-template-columns:1fr;align-content:center} /* redesigned AI side rail: surface-led panels, no outlines (owner 2026-07-16) */ .pxs-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 9%,var(--panel)),var(--panel) 62%);border-radius:18px;padding:1.15rem 1.2rem} .pxs-hero-top{display:flex;align-items:center;gap:12px;margin-bottom:.6rem} .pxs-hero-t{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap} .pxs-hero-t b{font-size:1.02rem} .pxs-hero>p{margin:0;font-size:.88rem;line-height:1.75;color:var(--muted);text-wrap:pretty} .pxs-council{display:flex;align-items:center;gap:.75rem;margin-top:.95rem;background:color-mix(in srgb,var(--panel2) 72%,transparent);border-radius:12px;padding:.62rem .85rem;flex-wrap:wrap} .pxs-arrow{display:grid;color:var(--muted)} .pxs-arrow svg{width:17px;height:17px} html[dir=rtl] .pxs-arrow svg{transform:scaleX(-1)} .pxs-one{display:inline-flex;align-items:center;gap:.45rem;font-weight:750;font-size:.84rem;color:var(--green)} .pxs-one svg{width:14px;height:14px;flex:none} .pxs-feat{display:flex;align-items:flex-start;gap:13px;background:var(--panel);border-radius:16px;padding:.95rem 1.05rem} .pxs-feat .fi{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--gold)} .pxs-feat .fi svg{width:19px;height:19px} .pxs-feat b{display:block;font-size:.92rem;margin-bottom:.22rem} .pxs-feat p{margin:0;font-size:.82rem;line-height:1.65;color:var(--muted);text-wrap:pretty} .pxs-cta{align-self:flex-start;text-decoration:none;margin-top:.2rem} @media(max-width:640px){.pxs-cta{align-self:stretch;text-align:center}} .px-feats{display:flex;flex-direction:column;gap:.55rem;padding:0 .3rem} .px-feats span{display:flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:650} .px-feats svg{width:15px;height:15px;color:var(--green);flex:none;background:color-mix(in oklab,var(--green) 14%,transparent);border-radius:50%;padding:4px;box-sizing:content-box} .px-feats em{font-style:normal} .px-soonrow{padding:0 .3rem} /* the phone mockup is always a dark device screen: pin its palette so it stays readable in light theme too */ .px-phone{--text:#eaf4f2;--muted:#8fb0ad;--panel:#0f1d22;--panel2:#12252b;--line:#1e3a42;--line2:#295059;--green:#2fbf87;--gold:#e0b64a;--gold2:#f0cd6e;color:var(--text)} .px-appbar .px-abtx b,.px-b,.px-brain{color:var(--text)} /* generated image + video result tiles inside the assistant bubble */ .px-media{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:3px;width:212px;max-width:100%} .px-media .px-gen{aspect-ratio:4/3} .px-genlbl{white-space:nowrap;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis} .px-gen{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line2);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center} .px-scene{position:absolute;inset:0;width:100%;height:100%;display:block} .px-genlbl{position:absolute;z-index:2;bottom:6px;inset-inline-start:6px;display:inline-flex;align-items:center;gap:4px;font-size:.5rem;font-weight:800;background:rgba(0,0,0,.55);color:#fff;padding:2px 7px;border-radius:100px;backdrop-filter:blur(3px)} .px-genlbl svg{width:8px;height:8px;color:var(--gold2)} .px-play{position:absolute;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(224,182,74,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px -3px rgba(0,0,0,.6)} .px-play svg{width:14px;height:14px;color:#231a05;margin-inline-start:2px} /* gentle pulse/glow on the assistant logo mark (transform + opacity only) */ @keyframes pxLogoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}} @keyframes pxLogoGlow{0%,100%{box-shadow:0 4px 12px -4px rgba(224,182,74,.55)}50%{box-shadow:0 6px 20px -3px rgba(224,182,74,.9)}} .px-logo{animation:pxLogoPulse 2.8s ease-in-out infinite,pxLogoGlow 2.8s ease-in-out infinite} .sc-ic.sp-c1{animation:pxLogoPulse 2.8s ease-in-out infinite,pxLogoGlow 2.8s ease-in-out infinite} @media(prefers-reduced-motion:reduce){.px-logo,.sc-ic.sp-c1{animation:none}} /* ---- Kurdify AI: data-grounded section (proof bar, pipeline, citation, skills) ---- */ /* Proof bar: the live counts that back the "it has read Kurdistan" claim. */ /* Same reasoning as .kai-grid: 4 tiles, so 2x2 then 4x1. Never 3 + 1. */ .kai-proof{display:flex;flex-wrap:wrap;justify-content:center;margin:1.3rem auto .2rem;max-width:600px;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden} .kai-pf{flex:1 1 130px;display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.7rem .55rem;position:relative} .kai-pf:not(:first-child)::before{content:"";position:absolute;inset-inline-start:0;top:22%;bottom:22%;width:1px;background:var(--line)} .kai-pf-ic{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--gold)} .kai-pf-ic svg{width:14px;height:14px} .kai-pf-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2} .kai-pf b{font-size:1.05rem;font-weight:800;color:var(--gold2);letter-spacing:-.02em;font-variant-numeric:tabular-nums} .kai-pf span{font-size:.68rem;font-weight:700;color:var(--muted);white-space:nowrap} @media(max-width:520px){.kai-proof{max-width:340px}.kai-pf{flex:1 1 45%}.kai-pf:nth-child(3)::before{display:none}} /* Pipeline steps replacing the old vendor badges inside the phone mockup. */ .px-step{align-items:center} .pxs-n{flex:none;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:.58rem;font-weight:800; color:var(--gold2);background:color-mix(in srgb,var(--gold) 20%,transparent)} /* three dots that read as "scanning the data" */ .px-scan{display:inline-flex;align-items:center;gap:3px;flex:none} .px-scan i{width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.35;animation:kaiScan 1.4s ease-in-out infinite} .px-scan i:nth-child(2){animation-delay:.18s} .px-scan i:nth-child(3){animation-delay:.36s} @keyframes kaiScan{0%,100%{opacity:.3}50%{opacity:1}} /* the receipt line under the assistant's recommendation */ /* quoted customer voices inside the answer bubble */ .px-quotes{display:flex;flex-direction:column;gap:4px;margin:6px 0 5px} /* tinted quote blocks, not side-striped list items */ .px-qt{display:block;font-size:.56rem;line-height:1.55;color:var(--text);opacity:.86; background:color-mix(in srgb,var(--gold) 8%,transparent);border-radius:8px;padding:.3rem .48rem} .px-qt i{display:none} .px-qt bdi::before{content:"\201C";color:var(--gold);margin-inline-end:1px} .px-qt bdi::after{content:"\201D";color:var(--gold);margin-inline-start:1px} .px-cite{display:inline-flex;align-items:center;gap:5px;margin:4px 0 2px;font-size:.58rem;font-weight:700;color:var(--muted)} .px-cite svg{width:11px;height:11px;flex:none;color:var(--gold)} .px-cite b{color:var(--gold2)} /* Skills grid */ .kai-skills{margin-top:2.6rem} .kai-sh{text-align:center;font-size:clamp(1.25rem,3.2vw,1.7rem);font-weight:800;text-wrap:balance;margin:0 0 1.3rem} /* Explicit column counts, not auto-fit: there are 6 skills and auto-fit was resolving to 5 across with a single orphan below. 6 divides evenly by 1, 2 and 3, so each breakpoint here yields full equal rows (6x1, 3x2, 2x3) and never a ragged tail. */ .kai-grid{display:grid;grid-template-columns:1fr;gap:12px} @media(min-width:720px){.kai-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1100px){.kai-grid{grid-template-columns:repeat(3,1fr)}} .kai-sk{position:relative;background:linear-gradient(165deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:18px;padding:1.15rem 1.2rem;overflow:hidden;transition:border-color .2s,transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s} .kai-sk::before{content:"";position:absolute;inset:0;background:radial-gradient(140px 100px at 100% 0%,color-mix(in srgb,var(--gold) 16%,transparent),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none} .kai-sk:hover{border-color:color-mix(in srgb,var(--gold) 45%,var(--line2));transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(0,0,0,.6)} .kai-sk:hover::before{opacity:1} .kai-ski{position:relative;z-index:1;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:.8rem; background:linear-gradient(155deg,color-mix(in srgb,var(--gold) 26%,var(--panel2)),color-mix(in srgb,var(--gold) 6%,var(--panel2)));color:var(--gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 16px -10px rgba(0,0,0,.6);transition:transform .3s cubic-bezier(.2,.8,.2,1.4)} .kai-sk:hover .kai-ski{transform:scale(1.08) rotate(-4deg)} .kai-ski svg{width:19px;height:19px} .kai-sk b{position:relative;z-index:1;display:block;font-size:.95rem;margin-bottom:.32rem;text-wrap:pretty} .kai-sk p{position:relative;z-index:1;margin:0 0 .7rem;font-size:.84rem;line-height:1.68;color:var(--muted);text-wrap:pretty} /* the data source behind each skill, so every claim is checkable */ .kai-src{position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:.68rem;font-weight:700;color:var(--gold2); background:color-mix(in srgb,var(--gold) 9%,transparent);border:1px solid color-mix(in srgb,var(--gold) 16%,transparent);border-radius:100px;padding:.2rem .6rem} .kai-src::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;flex:none} @media(prefers-reduced-motion:reduce){.px-scan i{animation:none;opacity:.7}.kai-sk{transition:none}.kai-sk:hover{transform:none}} /* "Only in the Kurdify App" pill under the section title */ .suite-onlyapp{display:inline-flex;align-items:center;gap:6px;margin-top:.6rem;font-size:.7rem;font-weight:800;color:var(--gold2);background:color-mix(in srgb,var(--gold) 12%,transparent);border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line2));border-radius:100px;padding:5px 12px} .suite-onlyapp svg{width:13px;height:13px;flex:none} /* Kurdify AI agents row: keep all specialist chips on a single line (owner 2026-07-24). Scrolls horizontally on narrow screens rather than wrapping or overflowing the page. */ #kurdify-ai .pag-grid{flex-wrap:nowrap;max-width:none;overflow-x:auto;justify-content:center;padding-bottom:4px;scrollbar-width:none} #kurdify-ai .pag-grid::-webkit-scrollbar{display:none} #kurdify-ai .pag-card{flex:0 0 auto}