/* ============================================================ Amilify — design system ------------------------------------------------------------ · Bodoni Moda (display serif) + Inter (UI/body) · Amiri + IBM Plex Sans Arabic on the Arabic page · Layout uses CSS logical properties throughout, so ar/index.html mirrors correctly from alone. ============================================================ */ :root{ /* Brand palette, taken from the Amilify storefront mark */ --bg: #0A0D0E; --bg-2: #0E1314; --surface: #131A1B; --surface-2: #182122; --line: #222E2D; --line-soft: rgba(255,255,255,.09); --teal: #1F4E4C; --teal-mid: #2C6E6A; --teal-lite: #5FB3AB; --amber: #D9911F; --amber-lite:#EBAA43; --cream: #F1EDE4; --cream-2: #E6E0D3; --text: #EAEDEC; --muted: #9AA8A6; --muted-2: #6B7A78; /* Liquid glass */ --glass-bg: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.028) 46%, rgba(255,255,255,.06)); --glass-border: rgba(255,255,255,.14); --glass-blur: blur(20px) saturate(140%); --glass-inset: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(255,255,255,.06); --glass-shadow: 0 18px 50px rgba(0,0,0,.45); --radius: 18px; --radius-lg: 26px; --maxw: 1180px; --gutter: clamp(20px, 4vw, 56px); /* Easing — expo-out for entrances, soft-in-out for images */ --e-out: cubic-bezier(.16,1,.3,1); --e-img: cubic-bezier(.2,.8,.2,1); --e-soft: cubic-bezier(.4,0,.2,1); --serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', 'Times New Roman', serif; --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-block-start:120px; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-inline-size:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; } .wrap{ inline-size:min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline:auto; } .wrap-narrow{ inline-size:min(100% - (var(--gutter) * 2), 800px); } .sr-only{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .skip{ position:absolute; inset-block-start:-60px; inset-inline-start:16px; z-index:300; background:var(--amber); color:#0A0D0E; padding:10px 16px; border-radius:8px; font-weight:600; } .skip:focus{ inset-block-start:12px; } :focus-visible{ outline:2px solid var(--amber-lite); outline-offset:3px; border-radius:6px; } /* ============================================================ TYPOGRAPHY ============================================================ */ h1,h2,h3,h4{ margin:0; font-weight:400; } .display{ font-family:var(--serif); font-weight:500; line-height:1.03; letter-spacing:-.035em; } h1.display{ font-size:clamp(2.2rem, 4.4vw, 3.5rem); letter-spacing:-.04em; } h1.display em{ display:block; margin-block-start:.12em; } h2.display{ font-size:clamp(2.05rem, 4.4vw, 3.5rem); } h3.display{ font-size:clamp(1.35rem, 2vw, 1.7rem); letter-spacing:-.02em; } .display em{ font-style:italic; color:var(--amber); } .label{ font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--teal-lite); margin:0 0 20px; } .label-dim{ color:var(--muted-2); } .lead{ font-size:1.1rem; color:var(--muted); max-inline-size:54ch; } .sec-lead{ color:var(--muted); max-inline-size:60ch; margin:0; } p{ margin:0 0 15px; } p:last-child{ margin-block-end:0; } h3.ui{ font-family:var(--sans); font-size:1.06rem; font-weight:600; letter-spacing:-.01em; } /* ============================================================ LIQUID GLASS ============================================================ */ .glass{ position:relative; background:rgba(255,255,255,.05); border:1px solid var(--glass-border); box-shadow:var(--glass-inset), var(--glass-shadow); overflow:hidden; } @supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){ .glass{ background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); } } /* specular highlight along the top edge */ .glass::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); opacity:.8; pointer-events:none; } /* moving sheen — swept on hover */ .sheen::after{ content:""; position:absolute; inset:-40%; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.16) 48%, rgba(255,255,255,.05) 55%, transparent 62%); transform:translateX(-70%); opacity:0; transition:transform 1.1s var(--e-out), opacity .5s var(--e-out); pointer-events:none; } .sheen:hover::after,.sheen:focus-visible::after{ transform:translateX(70%); opacity:1; } /* ============================================================ BUTTONS ============================================================ */ .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 28px; border-radius:999px; font-size:.94rem; font-weight:600; letter-spacing:.01em; border:1px solid transparent; cursor:pointer; overflow:hidden; transition:transform .5s var(--e-out), background .35s var(--e-soft), border-color .35s var(--e-soft), color .35s var(--e-soft), box-shadow .5s var(--e-out); will-change:transform; } .btn .arrow{ transition:transform .45s var(--e-out); } .btn:hover .arrow{ transform:translateX(4px); } [dir="rtl"] .btn .arrow{ transform:scaleX(-1); } [dir="rtl"] .btn:hover .arrow{ transform:scaleX(-1) translateX(4px); } .btn-primary{ background:linear-gradient(140deg, var(--amber-lite), var(--amber) 62%, #C07E14); color:#14100A; box-shadow:0 10px 30px rgba(217,145,31,.22), inset 0 1px 0 rgba(255,255,255,.42); } .btn-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 42px rgba(217,145,31,.32), inset 0 1px 0 rgba(255,255,255,.5); } /* Glass CTA */ .btn-glass{ background:rgba(255,255,255,.06); border-color:var(--glass-border); color:var(--text); box-shadow:var(--glass-inset); } @supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){ .btn-glass{ background:var(--glass-bg); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); } } .btn-glass:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.11); } .btn-sm{ padding:11px 20px; font-size:.86rem; } .btn-block{ inline-size:100%; } /* ============================================================ NAV — floating glass pill ============================================================ */ .nav{ position:fixed; inset-block-start:0; inset-inline:0; z-index:200; padding:18px var(--gutter) 0; transition:padding .5s var(--e-out); } .nav.scrolled{ padding-block-start:10px; } .nav-inner{ inline-size:min(100%, var(--maxw)); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 10px 10px 22px; border-radius:999px; background:rgba(10,13,14,.42); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); transition:background .5s var(--e-soft), border-color .5s var(--e-soft), box-shadow .5s var(--e-soft); } @supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){ .nav-inner{ -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%); } } /* opaque enough to stay legible where it passes over the light band */ .nav.scrolled .nav-inner{ background:rgba(10,13,14,.84); border-color:rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 16px 40px rgba(0,0,0,.4); } [dir="rtl"] .nav-inner{ padding:10px 22px 10px 10px; } .brand{ display:flex; align-items:center; gap:11px; font-weight:600; font-size:1.06rem; letter-spacing:-.02em; } .brand img{ border-radius:9px; transition:transform .6s var(--e-out); } .brand:hover img{ transform:rotate(-4deg) scale(1.06); } .nav-links{ display:flex; align-items:center; gap:8px; } .nav-links .nl{ position:relative; padding:8px 14px; font-size:.87rem; color:var(--muted); transition:color .35s var(--e-soft); } .nav-links .nl::after{ content:""; position:absolute; inset-block-end:4px; inset-inline-start:14px; inline-size:calc(100% - 28px); block-size:1px; background:var(--teal-lite); transform:scaleX(0); transform-origin:inline-start center; transition:transform .55s var(--e-out); } .nav-links .nl:hover{ color:var(--text); } .nav-links .nl:hover::after{ transform:scaleX(1); } /* scroll-spy: the section you are actually reading */ .nav-links .nl.active{ color:var(--text); } .nav-links .nl.active::after{ transform:scaleX(1); opacity:.45; } .lang{ display:inline-flex; align-items:center; justify-content:center; inline-size:38px; block-size:38px; border-radius:50%; border:1px solid var(--glass-border); color:var(--muted); font-size:.82rem; font-weight:600; transition:color .35s, border-color .35s, background .35s, transform .5s var(--e-out); } .lang:hover{ color:var(--cream); border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.08); transform:scale(1.06); } .nav-toggle{ display:none; flex-direction:column; gap:5px; justify-content:center; align-items:center; inline-size:42px; block-size:42px; background:rgba(255,255,255,.05); border:1px solid var(--glass-border); border-radius:50%; cursor:pointer; } .nav-toggle span{ display:block; inline-size:15px; block-size:1.5px; background:var(--text); border-radius:2px; transition:.4s var(--e-out); } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); } /* ============================================================ HERO ============================================================ */ .hero{ position:relative; overflow:hidden; padding-block:clamp(140px, 17vh, 190px) clamp(56px, 7vw, 90px); } .hero-aura{ position:absolute; inset-block-start:-30%; inset-inline-end:-12%; inline-size:min(780px, 82vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(44,110,106,.30), rgba(31,78,76,.10) 45%, transparent 66%); pointer-events:none; } .hero-aura-2{ position:absolute; inset-block-end:-30%; inset-inline-start:-18%; inline-size:min(620px, 70vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(217,145,31,.12), transparent 62%); pointer-events:none; } .hero-grid{ position:relative; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(32px, 5vw, 72px); align-items:center; } .eyebrow{ display:inline-flex; align-items:center; gap:10px; margin:0 0 26px; font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); padding:8px 16px; border-radius:999px; } .eyebrow .pulse{ inline-size:6px; block-size:6px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 0 rgba(217,145,31,.55); animation:pulse 2.6s var(--e-soft) infinite; } @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(217,145,31,.5); } 70%{ box-shadow:0 0 0 9px rgba(217,145,31,0); } 100%{ box-shadow:0 0 0 0 rgba(217,145,31,0); } } .hero .lead{ margin:26px 0 34px; } .cta-row{ display:flex; flex-wrap:wrap; gap:14px; } /* buttons keep their natural width and wrap instead of squeezing the label */ .cta-row .btn{ flex:0 0 auto; max-inline-size:100%; } .hero-note{ margin-block-start:34px; padding-inline-start:16px; border-inline-start:1px solid var(--line); font-size:.88rem; color:var(--muted-2); max-inline-size:44ch; } /* --- Phone stage --- */ /* sized to the phone, so the cup and badge anchor to the device rather than the column — and mirror cleanly in RTL */ .stage{ position:relative; inline-size:fit-content; margin-inline:auto; } /* physical insets on purpose: a vertical writing-mode flips what inset-inline-* means, so the mirror is handled explicitly below */ .stage-rail{ position:absolute; right:-34px; top:50%; transform:translateY(-50%); writing-mode:vertical-rl; font-size:.6rem; letter-spacing:.42em; text-transform:uppercase; color:var(--muted-2); white-space:nowrap; } [dir="rtl"] .stage-rail{ right:auto; left:-34px; } .phone{ position:relative; z-index:1; inline-size:clamp(258px, 27vw, 306px); aspect-ratio:9/19; border-radius:46px; padding:11px; background:linear-gradient(158deg,#232C2D 0%,#0C1011 62%); border:1px solid rgba(255,255,255,.10); box-shadow:0 50px 110px rgba(0,0,0,.62), 0 0 0 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.16); opacity:0; transform:perspective(1100px) rotateX(0deg) rotateY(0deg) translateY(46px) scale(.965); transition:opacity 1.1s var(--e-out), transform 1.3s var(--e-out); } .phone.lit{ opacity:1; transform:perspective(1100px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(0) scale(1); transition:opacity 1.1s var(--e-out), transform .9s var(--e-out); } .phone-notch{ position:absolute; inset-block-start:11px; inset-inline-start:50%; transform:translateX(-50%); inline-size:104px; block-size:26px; background:#0A0D0E; border-radius:0 0 15px 15px; z-index:4; } .phone-screen{ position:relative; block-size:100%; border-radius:36px; overflow:hidden; background: radial-gradient(120% 70% at 50% 0%, rgba(44,110,106,.30), transparent 60%), linear-gradient(180deg,#0E1516 0%,#0A0F10 100%); padding:46px 15px 16px; } .wallet-head{ display:flex; align-items:baseline; gap:11px; margin-block-end:20px; } .wallet-time{ font-size:.72rem; color:var(--muted-2); font-variant-numeric:tabular-nums; } .wallet-title{ font-family:var(--serif); font-size:1.4rem; color:var(--cream); letter-spacing:-.02em; } .pass-stack{ position:relative; } .pass-ghost{ position:absolute; inset-inline:12px; inset-block-start:-16px; block-size:62px; border-radius:19px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07); opacity:0; transform:translateY(14px); transition:opacity .8s var(--e-out) .1s, transform .9s var(--e-out) .1s; } .lit .pass-ghost{ opacity:1; transform:none; } /* --- The wallet pass: liquid glass --- */ .pass{ position:relative; border-radius:19px; padding:17px; overflow:hidden; background: linear-gradient(150deg, rgba(95,179,171,.30) 0%, rgba(31,78,76,.62) 44%, rgba(12,26,26,.78) 100%); border:1px solid rgba(255,255,255,.17); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(255,255,255,.07), 0 22px 48px rgba(0,0,0,.5); isolation:isolate; } @supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){ .pass{ -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); } } /* refraction that follows the pointer */ .pass::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(160px 160px at var(--px,70%) var(--py,18%), rgba(255,255,255,.20), rgba(255,255,255,.05) 42%, transparent 70%); transition:opacity .6s var(--e-soft); } /* chromatic edge — the thin colour split you get on real glass */ .pass::after{ content:""; position:absolute; inset:0; border-radius:19px; pointer-events:none; padding:1px; background:linear-gradient(135deg, rgba(95,179,171,.65), transparent 34%, transparent 66%, rgba(217,145,31,.5)); -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; opacity:.85; } .pass-front{ opacity:0; transform:translateY(120px) rotateX(26deg) scale(.9); transform-origin:50% 100%; transition:opacity .8s var(--e-out), transform 1.15s var(--e-out); } .lit .pass-front{ opacity:1; transform:none; } .pass-top{ display:flex; align-items:center; gap:11px; margin-block-end:18px; } .pass-mark{ inline-size:34px; block-size:34px; border-radius:9px; object-fit:contain; background:rgba(255,255,255,.9); padding:4px; } .pass-brand{ font-family:var(--serif); font-size:1.02rem; color:var(--cream); line-height:1.15; letter-spacing:-.01em; } .pass-sub{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(241,237,228,.6); } .pass-stamps{ display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin-block-end:15px; } .pass-stamps i{ aspect-ratio:1; border-radius:50%; border:1.5px dashed rgba(241,237,228,.3); transform:scale(.8); opacity:.6; transition:background .5s var(--e-out), border-color .5s var(--e-out), transform .6s cubic-bezier(.34,1.56,.64,1), opacity .4s var(--e-out); } .pass-stamps i.on{ background:linear-gradient(150deg, var(--amber-lite), var(--amber)); border:1.5px solid rgba(255,255,255,.3); box-shadow:0 3px 10px rgba(217,145,31,.4), inset 0 1px 0 rgba(255,255,255,.5); transform:scale(1); opacity:1; } .pass-status{ font-size:.76rem; color:rgba(241,237,228,.8); margin-block-end:15px; font-variant-numeric:tabular-nums; } .pass-code{ background:var(--cream); border-radius:10px; padding:9px; } .bars{ display:block; block-size:34px; background:repeating-linear-gradient(90deg,#0A0D0E 0 2px,transparent 2px 4px,#0A0D0E 4px 5px,transparent 5px 9px); } /* dashboard glimpse — the other half of the system, behind the phone */ .dash{ position:absolute; z-index:0; inset-block-start:5%; inset-inline-start:-62%; inline-size:clamp(178px, 19vw, 228px); border-radius:18px; /* the trailing gutter is the strip the phone covers — logical, so it lands on the covered side in Arabic too */ padding-block:15px; padding-inline-start:17px; padding-inline-end:58px; transform:rotate(-3deg); opacity:0; transition:opacity 1s var(--e-out) .45s, transform 1.1s var(--e-out) .45s; } [dir="rtl"] .dash{ transform:rotate(3deg); } .dash.show{ opacity:1; } .dash-top{ display:flex; align-items:center; gap:7px; margin-block-end:12px; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); } .dash-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-block:6px; border-block-start:1px solid rgba(255,255,255,.07); font-size:.74rem; color:var(--muted); } .dash-row:first-of-type{ border-block-start:0; } .dash-row b{ font-family:var(--serif); font-size:1rem; color:var(--cream); font-weight:500; font-variant-numeric:tabular-nums; } .dash-row b.tick{ animation:tick .7s var(--e-out); } @keyframes tick{ 0%{ transform:translateY(6px); opacity:0; } 100%{ transform:none; opacity:1; } } .dash-bars{ display:flex; align-items:flex-end; gap:4px; block-size:30px; margin-block-start:13px; } .dash-bars i{ flex:1; border-radius:2px 2px 0 0; background:linear-gradient(180deg, var(--teal-lite), rgba(95,179,171,.25)); block-size:var(--h,40%); opacity:.85; } .dash-bars i:last-child{ background:linear-gradient(180deg, var(--amber-lite), rgba(217,145,31,.3)); opacity:1; } /* live badge, wallet side of the stage */ .live-badge{ position:absolute; z-index:3; inset-block-end:-2%; inset-inline-end:-26%; border-radius:16px; padding:13px 18px; text-align:start; min-inline-size:168px; opacity:0; transform:translateY(16px); transition:opacity .8s var(--e-out), transform .9s var(--e-out); } .live-badge.show{ opacity:1; transform:none; } .live-badge .lb-top{ display:flex; align-items:center; gap:7px; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); } .live-badge .lb-dot{ inline-size:5px; block-size:5px; border-radius:50%; background:#5FB3AB; animation:pulse-live 1.9s ease-in-out infinite; } @keyframes pulse-live{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } } .live-badge .lb-main{ font-family:var(--serif); font-size:1.12rem; color:var(--cream); margin-block-start:3px; letter-spacing:-.01em; } .live-badge .lb-sub{ font-size:.64rem; letter-spacing:.14em; color:var(--muted-2); text-transform:uppercase; } .scroll-cue{ display:flex; align-items:center; gap:12px; margin-block-start:52px; font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted-2); } .scroll-cue .line{ inline-size:54px; block-size:1px; background:linear-gradient(90deg, var(--muted-2), transparent); transform-origin:inline-start; animation:cue 2.8s var(--e-soft) infinite; } @keyframes cue{ 0%,100%{ transform:scaleX(.4); opacity:.4; } 50%{ transform:scaleX(1); opacity:1; } } [dir="rtl"] .scroll-cue .line{ background:linear-gradient(270deg, var(--muted-2), transparent); } /* ============================================================ MARQUEE ============================================================ */ /* Capability rail — slow, quiet, one cell per thing we build */ .rail{ border-block:1px solid var(--line); background:var(--bg-2); overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .rail-track{ display:flex; inline-size:max-content; animation:rail 96s linear infinite; } [dir="rtl"] .rail-track{ animation-direction:reverse; } .rail:hover .rail-track, .rail:focus-within .rail-track{ animation-play-state:paused; } .rail-set{ display:flex; } .rail-item{ display:flex; align-items:center; gap:11px; padding:22px 30px; border-inline-end:1px solid var(--line); font-size:.72rem; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--muted-2); white-space:nowrap; transition:color .5s var(--e-soft), background .5s var(--e-soft); } .rail-item:hover{ color:var(--text); background:rgba(255,255,255,.022); } .rail-item svg{ inline-size:16px; block-size:16px; flex:none; fill:none; stroke:var(--teal-mid); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:stroke .5s var(--e-soft); } .rail-item:hover svg{ stroke:var(--amber); } @keyframes rail{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* English ⇄ العربية, swapped gently in place */ .swap{ position:relative; display:inline-grid; } .swap > span{ grid-area:1/1; transition:opacity .7s var(--e-soft), transform .7s var(--e-out); } .swap > span[aria-hidden="true"]{ opacity:0; transform:translateY(-4px); } /* ============================================================ SECTIONS ============================================================ */ .sec{ padding-block:clamp(74px, 9vw, 130px); position:relative; } .sec-alt{ background:var(--bg-2); border-block:1px solid var(--line); } .sec-head{ max-inline-size:760px; margin-block-end:clamp(40px, 5vw, 64px); } .sec-head .sec-lead{ margin-block-start:20px; } /* --- Problem: editorial numbered rows --- */ .probs{ border-block-start:1px solid var(--line); } .prob{ display:grid; grid-template-columns:88px 1.1fr 1fr; gap:28px; align-items:start; padding-block:34px; border-block-end:1px solid var(--line); transition:background .5s var(--e-soft); } .prob:hover{ background:rgba(255,255,255,.018); } .prob-num{ font-family:var(--serif); font-size:1.5rem; color:var(--teal-mid); font-variant-numeric:tabular-nums; line-height:1; } .prob h3{ font-family:var(--serif); font-size:clamp(1.25rem,2.1vw,1.62rem); letter-spacing:-.02em; line-height:1.2; } .prob p{ color:var(--muted); font-size:.98rem; } /* --- Steps --- */ .steps{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:26px; } .step{ position:relative; padding-block-start:26px; border-block-start:1px solid var(--line); } .step-n{ font-size:.66rem; letter-spacing:.24em; color:var(--amber); display:block; margin-block-end:16px; } .step h3{ margin-block-end:10px; } .step p{ color:var(--muted); font-size:.95rem; } .step-bar{ position:absolute; inset-block-start:-1px; inset-inline-start:0; block-size:1px; inline-size:0; background:var(--amber); transition:inline-size 1.1s var(--e-out) var(--d,0ms); } .step.in .step-bar{ inline-size:100%; } /* --- Compare --- */ .compare{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .col{ border-radius:var(--radius-lg); padding:34px; border:1px solid var(--line); background:var(--surface); } .col-wallet{ border-color:rgba(95,179,171,.3); background:linear-gradient(165deg, rgba(31,78,76,.34), var(--surface) 62%); } .tag{ display:inline-block; font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; padding:7px 14px; border-radius:999px; margin-block-end:22px; } .tag-dim{ background:rgba(255,255,255,.05); color:var(--muted-2); border:1px solid var(--line); } .tag-accent{ background:var(--amber); color:#14100A; } .list{ list-style:none; padding:0; margin:0; } .list li{ position:relative; padding-inline-start:30px; padding-block:9px; color:var(--muted); font-size:.96rem; border-block-start:1px solid rgba(255,255,255,.045); } .list li:first-child{ border-block-start:0; } .list li::before{ position:absolute; inset-inline-start:0; inset-block-start:9px; font-weight:600; } .list-x li::before{ content:"\00d7"; color:var(--muted-2); } .list-check li::before{ content:"\2713"; color:var(--teal-lite); } .col-wallet .list li{ color:#C9D8D6; } /* ============================================================ STATEMENT — the quiet centred band ============================================================ */ .statement{ position:relative; text-align:center; padding-block:clamp(96px, 13vw, 170px); border-block:1px solid var(--line); background: radial-gradient(78% 62% at 50% 0%, rgba(31,78,76,.26), transparent 64%), var(--bg); } .statement .label{ margin-block-end:26px; } .statement .display{ margin-inline:auto; max-inline-size:19ch; } .statement .sec-lead{ margin:28px auto 0; max-inline-size:54ch; } .statement-note{ display:inline-flex; align-items:center; gap:10px; margin-block-start:40px; padding:11px 20px; border-radius:999px; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); } /* ============================================================ INDUSTRIES — light editorial band ============================================================ */ .band-light{ --text:#14191A; --muted:#5A6462; --muted-2:#8A928F; --line:rgba(20,25,26,.14); --surface:#EAE5DA; background: radial-gradient(90% 60% at 84% 0%, #F6F3EC, transparent 62%), var(--cream); color:var(--text); border-block:1px solid rgba(20,25,26,.1); } .band-light .label{ color:var(--teal); } .band-light .display em{ color:#B87A15; } .ind-layout{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(34px, 5vw, 68px); align-items:start; } .ind-list{ display:grid; gap:14px; } .ind-card{ position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; inline-size:100%; text-align:start; padding:20px 22px; border-radius:var(--radius); background:rgba(255,255,255,.5); border:1px solid rgba(20,25,26,.1); cursor:pointer; overflow:hidden; transition:transform .55s var(--e-out), box-shadow .55s var(--e-out), border-color .45s var(--e-soft), background .45s var(--e-soft); } .ind-card:hover{ transform:translateY(-3px); box-shadow:0 16px 38px rgba(20,25,26,.11); border-color:rgba(20,25,26,.2); } .ind-card[aria-pressed="true"]{ background:#14191A; border-color:#14191A; box-shadow:0 20px 46px rgba(20,25,26,.24); } .ind-card[aria-pressed="true"] .ind-name{ color:var(--cream); } .ind-card[aria-pressed="true"] .ind-desc{ color:rgba(241,237,228,.66); } .ind-card[aria-pressed="true"] .ind-idx{ color:var(--amber); } .ind-idx{ font-family:var(--serif); font-size:.92rem; color:var(--muted-2); font-variant-numeric:tabular-nums; transition:color .45s; } .ind-name{ display:block; font-family:var(--serif); font-size:1.24rem; letter-spacing:-.02em; line-height:1.2; transition:color .45s; } .ind-desc{ display:block; font-size:.86rem; line-height:1.45; color:var(--muted); margin-block-start:5px; max-inline-size:42ch; transition:color .45s; } .ind-thumb{ inline-size:52px; block-size:52px; border-radius:12px; object-fit:cover; border:1px solid rgba(20,25,26,.12); } .badge{ display:inline-block; font-size:.58rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:5px 10px; border-radius:999px; white-space:nowrap; } .badge-live{ background:#14191A; color:var(--amber-lite); } .ind-card[aria-pressed="true"] .badge-live{ background:var(--amber); color:#14100A; } .badge-dev{ background:rgba(31,78,76,.14); color:var(--teal); border:1px solid rgba(31,78,76,.26); } .badge-soon{ background:transparent; color:var(--muted-2); border:1px solid rgba(20,25,26,.16); } .ind-card[aria-pressed="true"] .badge-dev, .ind-card[aria-pressed="true"] .badge-soon{ background:rgba(255,255,255,.1); color:rgba(241,237,228,.8); border-color:rgba(255,255,255,.2); } /* the morphing demo pass */ .demo{ position:sticky; inset-block-start:120px; } .demo-frame{ position:relative; border-radius:var(--radius-lg); padding:30px; background:linear-gradient(165deg, #1B2223, #0E1314); border:1px solid rgba(20,25,26,.16); box-shadow:0 30px 70px rgba(20,25,26,.22); overflow:hidden; } .demo-frame::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:180px; background:radial-gradient(120% 100% at 50% 0%, rgba(95,179,171,.22), transparent 70%); pointer-events:none; } .demo-label{ position:relative; display:flex; justify-content:space-between; align-items:center; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2); margin-block-end:20px; } .demo-pass{ position:relative; min-block-size:212px; } .demo-pass .pass, .demo-pass .ui{ transition:opacity .45s var(--e-soft), transform .7s var(--e-out); } .demo-pass.swap .pass, .demo-pass.swap .ui{ opacity:0; transform:translateY(12px) scale(.98); } /* what the build actually includes for this vertical */ .demo-incl{ position:relative; list-style:none; margin:22px 0 0; padding:18px 0 0; border-block-start:1px solid rgba(255,255,255,.1); display:grid; gap:9px; } .demo-incl li{ position:relative; padding-inline-start:24px; font-size:.82rem; line-height:1.45; color:#A9B6B4; } .demo-incl li::before{ content:"\2713"; position:absolute; inset-inline-start:0; inset-block-start:0; color:var(--teal-lite); font-weight:600; } .demo-incl li b{ color:var(--cream); font-weight:500; } .demo-foot{ position:relative; margin-block-start:18px; padding-block-start:16px; border-block-start:1px solid rgba(255,255,255,.1); font-size:.78rem; color:#8B9997; } .demo-foot b{ color:var(--cream); font-weight:500; } /* vertical-specific pass modules */ .pass-meter{ block-size:6px; border-radius:99px; background:rgba(255,255,255,.16); overflow:hidden; margin-block-end:13px; } .pass-meter i{ display:block; block-size:100%; border-radius:99px; background:linear-gradient(90deg, var(--teal-lite), var(--amber)); inline-size:0; transition:inline-size 1.1s var(--e-out); } .pass-rows{ display:grid; gap:7px; margin-block-end:14px; } .pass-row{ display:flex; justify-content:space-between; font-size:.72rem; color:rgba(241,237,228,.74); } .pass-row b{ color:var(--cream); font-weight:500; } .pass-chip{ display:inline-block; padding:5px 11px; border-radius:999px; margin-block-end:13px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(241,237,228,.86); } /* ============================================================ WHY / FOUNDER ============================================================ */ .why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.6vw,34px); } .why{ padding-block-start:26px; border-block-start:1px solid var(--line); position:relative; } .why-mark{ font-family:var(--serif); font-size:.9rem; color:var(--teal-mid); display:block; margin-block-end:16px; } .why h3{ font-family:var(--serif); font-size:1.4rem; letter-spacing:-.02em; margin-block-end:12px; } .why p{ color:var(--muted); font-size:.96rem; } .founder{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,80px); align-items:center; } .founder-quote{ font-family:var(--serif); font-size:clamp(1.5rem, 2.6vw, 2.15rem); line-height:1.28; letter-spacing:-.025em; color:var(--cream); } .founder-quote::before{ content:"\201C"; color:var(--teal-mid); } .founder-quote::after{ content:"\201D"; color:var(--teal-mid); } .founder-meta{ margin-block-start:28px; padding-block-start:20px; border-block-start:1px solid var(--line); } .founder-meta .fm-name{ font-size:.95rem; color:var(--text); } .founder-meta .fm-role{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); margin-block-start:4px; } .founder-body p{ color:var(--muted); } .founder-body p + p{ margin-block-start:15px; } /* ============================================================ PARTNER + FORM ============================================================ */ .partner{ position:relative; overflow:hidden; } .partner-aura{ position:absolute; inset-block-start:-40%; inset-inline-start:-10%; inline-size:min(720px,80vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(31,78,76,.30), transparent 64%); pointer-events:none; } .partner-grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:center; } .form-card{ border-radius:var(--radius-lg); padding:clamp(26px,3vw,38px); } .form-card h3{ font-family:var(--serif); font-size:1.6rem; letter-spacing:-.02em; } .form-sub{ color:var(--muted); font-size:.92rem; margin:8px 0 26px; } .field{ margin-block-end:16px; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } label{ display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-block-end:8px; } input,select,textarea{ inline-size:100%; padding:14px 16px; border-radius:12px; background:rgba(0,0,0,.26); border:1px solid rgba(255,255,255,.11); color:var(--text); font:inherit; font-size:.95rem; transition:border-color .4s var(--e-soft), background .4s var(--e-soft), box-shadow .4s var(--e-soft); } input::placeholder,textarea::placeholder{ color:var(--muted-2); } input:focus,select:focus,textarea:focus{ outline:none; border-color:rgba(95,179,171,.6); background:rgba(0,0,0,.34); box-shadow:0 0 0 4px rgba(95,179,171,.1); } input.invalid,select.invalid,textarea.invalid{ border-color:#C2564B; } select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; } [dir="rtl"] select{ background-position:20px 50%, 25px 50%; } .form-fine{ font-size:.76rem; color:var(--muted-2); margin-block-start:16px; text-align:center; } .form-msg{ font-size:.9rem; margin-block-start:14px; text-align:center; min-block-size:1.2em; } .form-msg.ok{ color:var(--teal-lite); } .form-msg.err{ color:#E08A7E; } .partner .list li{ font-size:.98rem; } /* ============================================================ FAQ ============================================================ */ .qa{ border-block-end:1px solid var(--line); } .qa summary{ cursor:pointer; list-style:none; padding-block:26px; padding-inline-end:44px; font-family:var(--serif); font-size:clamp(1.1rem,1.7vw,1.32rem); letter-spacing:-.015em; position:relative; transition:color .4s var(--e-soft); } .qa summary::-webkit-details-marker{ display:none; } .qa summary:hover{ color:var(--teal-lite); } .qa summary::after{ content:""; position:absolute; inset-inline-end:8px; inset-block-start:calc(50% - 1px); inline-size:14px; block-size:2px; background:var(--teal-lite); border-radius:2px; transition:transform .5s var(--e-out); } .qa summary::before{ content:""; position:absolute; inset-inline-end:8px; inset-block-start:calc(50% - 1px); inline-size:14px; block-size:2px; background:var(--teal-lite); border-radius:2px; transform:rotate(90deg); transition:transform .5s var(--e-out); } .qa[open] summary::before{ transform:rotate(0deg); } .qa-body{ padding-block-end:26px; color:var(--muted); max-inline-size:68ch; } .qa[open] .qa-body{ animation:qa-in .6s var(--e-out); } @keyframes qa-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } } /* ============================================================ FOOTER ============================================================ */ .footer{ background:var(--bg-2); border-block-start:1px solid var(--line); padding-block:0 30px; } /* closing invitation — the last thing on the page should be a door */ .footer-close{ text-align:center; padding-block:clamp(72px,9vw,116px); border-block-end:1px solid var(--line); } .footer-close .display{ margin-inline:auto; max-inline-size:21ch; } .footer-close .btn{ margin-block-start:36px; } .footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:36px; align-items:start; padding-block-start:clamp(52px,6vw,78px); } .footer-tag{ font-family:var(--serif); font-size:clamp(1.35rem,2.4vw,1.9rem); letter-spacing:-.025em; color:var(--cream); max-inline-size:20ch; margin-block-start:20px; line-height:1.2; } .footer-col h4{ font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2); margin-block-end:18px; } .footer-col a{ display:block; color:var(--muted); font-size:.93rem; padding-block:6px; transition:color .35s, transform .5s var(--e-out); } /* social link: glyph + handle, same weight as its neighbours */ .footer-col a.social{ display:inline-flex; align-items:center; gap:9px; } .footer-col a.social svg{ inline-size:15px; block-size:15px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; } .footer-col a.social .handle{ font-variant-numeric:tabular-nums; } .footer-col a:hover{ color:var(--amber); transform:translateX(3px); } [dir="rtl"] .footer-col a:hover{ transform:translateX(-3px); } .footer-legal{ margin-block-start:clamp(44px,6vw,68px); padding-block-start:24px; border-block-start:1px solid var(--line); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); } /* ============================================================ REVEAL SYSTEM — staggered, eased ============================================================ */ .reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--e-out) var(--d,0ms), transform 1.05s var(--e-out) var(--d,0ms); will-change:opacity, transform; } .reveal.in{ opacity:1; transform:none; } .reveal-img{ overflow:hidden; } .reveal-img img{ transform:scale(1.14); transition:transform 1.6s var(--e-img) var(--d,0ms); } .reveal-img.in img{ transform:scale(1); } /* word-by-word display heading reveal (built by script.js) */ .sw{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-block-end:.08em; margin-block-end:-.08em; } .sw > i{ display:inline-block; font-style:inherit; transform:translateY(112%); transition:transform 1s var(--e-out) var(--d,0ms); } .in .sw > i, .sw.in > i{ transform:none; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1040px){ .steps{ grid-template-columns:1fr 1fr; } .why-grid{ grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,32px); } .ind-layout{ grid-template-columns:1fr; } .demo{ position:static; } .founder{ grid-template-columns:1fr; } } @media (max-width:880px){ html{ scroll-padding-block-start:96px; } .hero{ padding-block-start:124px; } .hero-grid{ grid-template-columns:1fr; gap:52px; } /* stacked: the dashboard sits above the phone instead of behind it */ .stage{ order:2; inline-size:100%; display:flex; flex-direction:column; align-items:center; gap:26px; } .dash{ position:static; order:-1; transform:none; padding-block:16px; padding-inline:18px; inline-size:min(320px, 86%); inset-block-start:auto; inset-inline-start:auto; } /* the badge joins the stack rather than hanging off the edge */ .live-badge{ position:static; inline-size:min(320px, 86%); inset:auto; min-inline-size:0; } [dir="rtl"] .dash{ transform:none; } .stage-rail{ display:none; } .compare,.partner-grid,.footer-top{ grid-template-columns:1fr; } .prob{ grid-template-columns:52px 1fr; gap:18px; } .prob p{ grid-column:2; } .nav-toggle{ display:flex; } .nav-links{ position:absolute; inset-block-start:calc(100% + 10px); inset-inline:0; flex-direction:column; align-items:stretch; gap:0; border-radius:22px; padding:12px; background:rgba(10,13,14,.9); border:1px solid rgba(255,255,255,.1); box-shadow:0 26px 60px rgba(0,0,0,.55); display:none; } @supports (backdrop-filter: blur(2px)){ .nav-links{ -webkit-backdrop-filter:blur(24px) saturate(150%); backdrop-filter:blur(24px) saturate(150%); } } .nav-links.open{ display:flex; } .nav-links .nl{ padding:14px 12px; font-size:.98rem; border-block-end:1px solid rgba(255,255,255,.06); } .nav-links .nl::after{ display:none; } .nav-links .btn{ margin-block-start:12px; justify-content:center; } .nav-links .lang{ margin-block-start:10px; inline-size:100%; border-radius:999px; block-size:44px; } .footer-legal{ flex-direction:column; gap:8px; } /* comfortable thumb targets, and a legible eyebrow */ .footer-col a{ padding-block:11px; } .label{ font-size:.74rem; letter-spacing:.2em; } .stage-rail{ display:none; } } @media (max-width:620px){ body{ font-size:16px; } .steps,.field-row{ grid-template-columns:1fr; } .cta-row{ flex-direction:column; align-items:stretch; } .cta-row .btn{ inline-size:100%; } .col{ padding:26px; } .why-grid{ grid-template-columns:1fr; gap:0; } .why{ padding-block:24px; } .live-badge{ padding:12px 16px; } .dash{ inline-size:min(300px, 92%); padding-block:13px; padding-inline:15px; } .ind-card{ grid-template-columns:auto 1fr; gap:14px; padding:16px 18px; } .ind-card .ind-thumb{ display:none; } .ind-card .badge{ grid-column:2; justify-self:start; margin-block-start:8px; } } /* ============================================================ WHAT WE BUILD — a spec sheet, not a wall of cards ============================================================ */ .build-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-block-start:1px solid var(--line); border-inline-start:1px solid var(--line); } .build-item{ display:flex; align-items:center; gap:14px; padding:22px 24px; border-block-end:1px solid var(--line); border-inline-end:1px solid var(--line); transition:background .5s var(--e-soft); } .build-item:hover{ background:rgba(255,255,255,.025); } .build-item svg{ inline-size:18px; block-size:18px; flex:none; fill:none; stroke:var(--teal-mid); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:stroke .5s var(--e-soft), transform .6s var(--e-out); } .build-item:hover svg{ stroke:var(--amber); transform:translateY(-2px); } .build-item span{ font-size:.97rem; color:var(--text); } .build-item.build-more{ background:linear-gradient(140deg, rgba(31,78,76,.34), rgba(255,255,255,.02)); border-color:rgba(95,179,171,.28); } .build-item.build-more span{ font-family:var(--serif); font-size:1.05rem; color:var(--cream); } .build-item.build-more svg{ stroke:var(--amber); } /* ============================================================ WEBSITES — the range, one line each ============================================================ */ .web-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,32px); } .web{ padding-block-start:24px; border-block-start:1px solid var(--line); transition:border-color .5s var(--e-soft); } .web:hover{ border-block-start-color:var(--teal-mid); } .web-frame{ block-size:96px; margin-block-end:20px; border-radius:12px; overflow:hidden; background:linear-gradient(165deg, #172021, #0F1516); border:1px solid var(--line); padding:9px; transition:transform .6s var(--e-out), border-color .5s var(--e-soft); } .web:hover .web-frame{ transform:translateY(-4px); border-color:rgba(95,179,171,.35); } .web-chrome{ display:flex; gap:4px; margin-block-end:8px; } .web-chrome i{ inline-size:5px; block-size:5px; border-radius:50%; background:rgba(255,255,255,.18); } .web-body{ display:grid; gap:5px; } .web-body b{ display:block; block-size:6px; border-radius:3px; background:rgba(95,179,171,.5); inline-size:var(--w,60%); transition:inline-size .8s var(--e-out); } .web-body i{ display:block; block-size:4px; border-radius:2px; background:rgba(255,255,255,.09); inline-size:var(--w,100%); } .web-row{ display:flex; gap:5px; } .web-row i{ flex:1; block-size:16px; border-radius:3px; background:rgba(255,255,255,.06); } .web:hover .web-body b{ inline-size:82%; } .web h3{ font-family:var(--serif); font-size:1.2rem; letter-spacing:-.02em; margin-block-end:9px; } .web p{ font-size:.9rem; color:var(--muted); } /* ============================================================ INDUSTRY PREVIEW — a small piece of the real interface ============================================================ */ .ui{ border-radius:14px; padding:13px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.09); display:grid; gap:9px; } .ui-head{ display:flex; align-items:center; justify-content:space-between; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:#8B9997; } .ui-chips{ display:flex; gap:6px; flex-wrap:wrap; } .ui-chip{ padding:4px 10px; border-radius:999px; font-size:.62rem; border:1px solid rgba(255,255,255,.14); color:rgba(241,237,228,.78); } .ui-chip.on{ background:var(--amber); border-color:var(--amber); color:#14100A; } .ui-cards{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .ui-card{ border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); transition:transform .5s var(--e-out), border-color .5s var(--e-soft); } .ui-card:hover{ transform:translateY(-3px); border-color:rgba(95,179,171,.4); } .ui-photo{ block-size:42px; background: linear-gradient(150deg, rgba(95,179,171,.28), rgba(31,78,76,.5)), repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 6px, transparent 6px 13px); } .ui-meta{ padding:8px 9px; display:grid; gap:4px; } .ui-meta b{ font-size:.68rem; color:var(--cream); font-weight:500; } .ui-meta span{ font-size:.6rem; color:#8B9997; } .ui-rows{ display:grid; gap:6px; } .ui-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:9px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06); font-size:.68rem; color:rgba(241,237,228,.8); } .ui-row b{ color:var(--cream); font-weight:500; } .ui-row .dot{ inline-size:6px; block-size:6px; border-radius:50%; background:var(--teal-lite); flex:none; } .ui-row.is-amber .dot{ background:var(--amber); } .ui-slots{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; } .ui-slot{ text-align:center; padding:7px 0; border-radius:8px; font-size:.62rem; border:1px solid rgba(255,255,255,.1); color:rgba(241,237,228,.72); } .ui-slot.on{ background:rgba(95,179,171,.22); border-color:rgba(95,179,171,.5); color:var(--cream); } .ui-slot.off{ opacity:.35; text-decoration:line-through; } .ui-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; } .ui-tile{ border-radius:9px; border:1px solid rgba(255,255,255,.08); overflow:hidden; background:rgba(255,255,255,.03); } .ui-tile .ui-photo{ block-size:34px; } .ui-tile span{ display:block; padding:6px 7px; font-size:.58rem; color:#8B9997; } .ui-stat{ display:flex; justify-content:space-between; align-items:baseline; } .ui-stat b{ font-family:var(--serif); font-size:1.25rem; color:var(--cream); font-weight:500; font-variant-numeric:tabular-nums; } .ui-stat span{ font-size:.62rem; color:#8B9997; letter-spacing:.1em; text-transform:uppercase; } .ui-spark{ display:flex; align-items:flex-end; gap:3px; block-size:26px; } .ui-spark i{ flex:1; border-radius:2px 2px 0 0; background:linear-gradient(180deg, var(--teal-lite), rgba(95,179,171,.2)); block-size:var(--h,40%); } .ui-spark i:last-child{ background:linear-gradient(180deg, var(--amber-lite), rgba(217,145,31,.25)); } /* ============================================================ ONE SYSTEM — the joins, drawn ============================================================ */ /* Built from real elements, not SVG text: each label is its own box, so Arabic lays out and mirrors natively instead of drifting off its anchor. */ .sys-figure{ margin-block-start:clamp(34px,4vw,52px); border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(165deg, rgba(31,78,76,.16), var(--surface)); padding:clamp(24px,3.4vw,44px); } .sysmap{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(18px,3vw,40px); align-items:center; } .sysmap-side{ display:grid; gap:14px; min-inline-size:0; } .sysmap-cap{ font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); } html[lang="ar"] .sysmap-cap{ letter-spacing:.02em; text-transform:none; font-size:.76rem; } .sysmap-nodes{ display:grid; gap:10px; } .sysmap-node{ padding:12px 16px; border-radius:11px; background:rgba(255,255,255,.035); border:1px solid var(--line); font-size:.8rem; color:var(--muted); text-align:start; /* never clip a label — Arabic words must stay whole */ white-space:normal; overflow-wrap:break-word; transition:border-color .5s var(--e-soft), color .5s var(--e-soft), background .5s var(--e-soft); } .sysmap-side.is-joined .sysmap-node{ background:rgba(31,78,76,.42); border-color:rgba(95,179,171,.4); color:#D2E0DE; } html[lang="ar"] .sysmap-node{ font-size:.88rem; } /* the connected side: nodes → spine → hub */ .sysmap-join{ display:grid; grid-template-columns:1fr 46px auto; align-items:center; gap:0; } .sysmap-wires{ position:relative; align-self:stretch; min-block-size:100%; } .sysmap-wires::before{ /* vertical spine */ content:""; position:absolute; inset-block:22%; inset-inline-start:50%; inline-size:1px; background:repeating-linear-gradient(180deg, var(--teal-lite) 0 5px, transparent 5px 9px); animation:flow 3.4s linear infinite; } .sysmap-wires::after{ /* spine → hub */ content:""; position:absolute; inset-block-start:50%; inset-inline-start:50%; inline-size:50%; block-size:1px; background:repeating-linear-gradient(90deg, var(--teal-lite) 0 5px, transparent 5px 9px); animation:flow-x 3.4s linear infinite; } .sysmap-side.is-joined .sysmap-node{ position:relative; } .sysmap-side.is-joined .sysmap-node::after{ /* node → spine */ content:""; position:absolute; inset-block-start:50%; inset-inline-end:-23px; inline-size:23px; block-size:1px; background:repeating-linear-gradient(90deg, var(--teal-lite) 0 5px, transparent 5px 9px); animation:flow-x 3.4s linear infinite; } @keyframes flow{ to{ background-position-y:18px; } } @keyframes flow-x{ to{ background-position-x:18px; } } .sysmap-hub{ padding:16px 20px; border-radius:14px; text-align:center; background:rgba(217,145,31,.13); border:1px solid var(--amber); box-shadow:0 0 30px rgba(217,145,31,.12); } .sysmap-hub b{ display:block; font-family:var(--serif); font-size:1.02rem; color:var(--cream); font-weight:500; } .sysmap-hub span{ display:block; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--amber-lite); margin-block-start:5px; } html[lang="ar"] .sysmap-hub span{ letter-spacing:.02em; text-transform:none; font-size:.74rem; } .sysmap-arrow{ display:flex; align-items:center; justify-content:center; inline-size:38px; block-size:38px; border-radius:50%; border:1px solid var(--line); color:var(--muted-2); flex:none; } .sysmap-arrow svg{ inline-size:16px; block-size:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } [dir="rtl"] .sysmap-arrow svg{ transform:scaleX(-1); } .sys-cap{ display:flex; gap:26px; flex-wrap:wrap; margin-block-start:26px; font-size:.78rem; color:var(--muted); } .sys-cap span{ display:flex; align-items:center; gap:8px; } .sys-cap i{ inline-size:16px; block-size:1px; background:var(--line); flex:none; } .sys-cap i.on{ background:var(--teal-lite); block-size:2px; } @media (max-width:820px){ /* stack the transformation: vendors above, arrow turns to point down */ .sysmap{ grid-template-columns:1fr; gap:20px; } .sysmap-arrow{ justify-self:center; } /* stacked, the arrow points down in both languages — no mirroring */ .sysmap-arrow svg, [dir="rtl"] .sysmap-arrow svg{ transform:rotate(90deg); } .sysmap-join{ grid-template-columns:1fr 34px auto; } .sysmap-side.is-joined .sysmap-node::after{ inset-inline-end:-17px; inline-size:17px; } } @media (max-width:520px){ .sysmap-join{ grid-template-columns:1fr; gap:12px; } .sysmap-wires{ display:none; } .sysmap-side.is-joined .sysmap-node::after{ display:none; } .sysmap-hub{ margin-block-start:4px; } } @media (max-width:1040px){ .build-grid{ grid-template-columns:repeat(2,1fr); } .web-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:620px){ .build-grid{ grid-template-columns:1fr; } .web-grid{ grid-template-columns:1fr; } .rail-item{ padding:18px 22px; font-size:.68rem; } .ui-cards{ grid-template-columns:1fr; } .sys-figure{ padding:18px; } } /* ============================================================ ARABIC — type pairing and RTL corrections Amiri (display, high-contrast naskh) answers Bodoni Moda; IBM Plex Sans Arabic answers Inter for UI and body. ============================================================ */ html[lang="ar"]{ --serif:'Amiri','Noto Naskh Arabic','Segoe UI',serif; --sans:'IBM Plex Sans Arabic','Segoe UI',system-ui,sans-serif; } html[lang="ar"] body{ font-size:17.5px; line-height:1.85; } /* Arabic script takes neither tight tracking nor uppercase */ html[lang="ar"] .display{ letter-spacing:0; line-height:1.34; font-weight:700; } html[lang="ar"] h1.display{ font-size:clamp(2.1rem, 4.4vw, 3.7rem); } html[lang="ar"] h2.display{ font-size:clamp(1.7rem, 3.4vw, 2.8rem); } html[lang="ar"] .label, html[lang="ar"] .step-n, html[lang="ar"] .tag, html[lang="ar"] .badge, html[lang="ar"] .pass-sub, html[lang="ar"] .pass-chip, html[lang="ar"] .demo-label, html[lang="ar"] .statement-note, html[lang="ar"] .live-badge .lb-top, html[lang="ar"] .live-badge .lb-sub, html[lang="ar"] .footer-col h4, html[lang="ar"] .footer-legal, html[lang="ar"] .scroll-cue, html[lang="ar"] .eyebrow, html[lang="ar"] .marquee span, html[lang="ar"] label, html[lang="ar"] .founder-meta .fm-role{ text-transform:none; letter-spacing:.02em; } html[lang="ar"] .label, html[lang="ar"] .footer-col h4, html[lang="ar"] .step-n{ font-size:.78rem; font-weight:600; } html[lang="ar"] .badge{ font-size:.68rem; } html[lang="ar"] .marquee span{ font-size:.8rem; } html[lang="ar"] .live-badge .lb-top, html[lang="ar"] .live-badge .lb-sub, html[lang="ar"] .demo-label, html[lang="ar"] .pass-sub{ font-size:.7rem; } /* Amiri sits low — give the word-reveal mask room for descenders */ html[lang="ar"] .sw{ padding-block-end:.22em; margin-block-end:-.22em; } html[lang="ar"] .founder-quote::before{ content:"\00BB"; } html[lang="ar"] .founder-quote::after{ content:"\00AB"; } html[lang="ar"] .prob-num, html[lang="ar"] .ind-idx, html[lang="ar"] .why-mark, html[lang="ar"] .wallet-time, html[lang="ar"] .pass-status{ font-family:var(--sans); } /* vertical rail reads badly in Arabic — drop it */ html[lang="ar"] .stage-rail{ display:none; } /* Latin runs inside Arabic: keep numerals and addresses in reading order */ html[lang="ar"] .footer-col a[dir="ltr"]{ text-align:start; } html[lang="ar"] .wallet-time, html[lang="ar"] input[type="tel"]{ direction:ltr; text-align:start; } /* mirrored directional details */ [dir="rtl"] .prob{ direction:rtl; } [dir="rtl"] .nav-links .nl::after{ transform-origin:right center; } [dir="rtl"] .step-bar{ inset-inline-start:auto; inset-inline-end:0; } /* ============================================================ MOTION PREFERENCES ============================================================ */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; transition-delay:0ms !important; } .reveal,.sw > i,.phone,.pass-front,.pass-ghost,.live-badge{ opacity:1 !important; transform:none !important; } .reveal-img img{ transform:none !important; } .step-bar{ inline-size:100% !important; } } /* project brief field */ textarea{ resize:vertical; min-block-size:78px; line-height:1.55; font-family:inherit; } /* email fallback link inside the form status line */ .form-msg a{ color:var(--teal-lite); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } .form-msg a:hover{ color:var(--amber); } /* honeypot — off-screen for bots, invisible and unfocusable for people */ .hp{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ============================================================ PROJECT PICKER — pick what you want built, before the form ============================================================ */ .picks-label{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-block-end:12px; } html[lang="ar"] .picks-label{ letter-spacing:.02em; text-transform:none; font-size:.8rem; } .picks{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-block-end:26px; } .pick{ position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start; padding:14px; border-radius:14px; text-align:start; cursor:pointer; background:rgba(255,255,255,.035); border:1px solid var(--line); transition:transform .5s var(--e-out), border-color .4s var(--e-soft), background .4s var(--e-soft), box-shadow .5s var(--e-out); } .pick:hover{ transform:translateY(-3px); border-color:rgba(95,179,171,.45); background:rgba(255,255,255,.06); } .pick svg{ inline-size:19px; block-size:19px; flex:none; margin-block-start:2px; fill:none; stroke:var(--teal-lite); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:stroke .4s var(--e-soft); } .pick b{ display:block; font-size:.92rem; font-weight:600; color:var(--text); letter-spacing:-.01em; } .pick span{ display:block; font-size:.78rem; line-height:1.45; color:var(--muted); margin-block-start:3px; } /* chosen */ .pick[aria-pressed="true"]{ background:linear-gradient(150deg, rgba(217,145,31,.16), rgba(255,255,255,.03)); border-color:var(--amber); box-shadow:0 10px 30px rgba(217,145,31,.14); } .pick[aria-pressed="true"] svg{ stroke:var(--amber); } .pick[aria-pressed="true"] b{ color:var(--cream); } /* the tick that appears when chosen */ .pick::after{ content:""; position:absolute; inset-block-start:11px; inset-inline-end:11px; inline-size:15px; block-size:15px; border-radius:50%; border:1px solid var(--line); background:no-repeat center/8px 8px; transition:border-color .4s var(--e-soft), background-color .4s var(--e-soft); } .pick[aria-pressed="true"]::after{ border-color:var(--amber); background-color:var(--amber); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.6L10 3.5' fill='none' stroke='%2314100A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pick-more{ grid-column:1 / -1; } /* "optional" marker beside a field label */ label .opt{ margin-inline-start:8px; font-size:.9em; letter-spacing:.06em; color:var(--muted-2); opacity:.8; } /* WhatsApp button in the start-a-project column */ .wa-btn{ margin-block-start:26px; gap:10px; } .wa-btn svg{ inline-size:17px; block-size:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; } /* Mobile overrides for the late-declared components above. These sit at the end of the file so they win on source order. */ @media (max-width:620px){ .picks{ grid-template-columns:1fr; gap:9px; } .pick{ padding:15px 16px; } .pick span span{ font-size:.82rem; } .wa-btn{ inline-size:100%; } }