/* ═══════════════════════════════════════════ TANAFOS · Lean Landing Page · Light Theme Bebas Neue (display) + Plus Jakarta Sans ═══════════════════════════════════════════ */ :root { --green: #00B06B; --green-d: #008F55; --green-08: rgba(0,176,107,.08); --green-16: rgba(0,176,107,.16); --green-28: rgba(0,176,107,.28); --green-glow: 0 4px 28px rgba(0,176,107,.22); --ink: #0C1810; --ink-2: #2B3D31; --ink-3: #4B6357; --ink-4: #7B9A89; --bg: #FFFFFF; --bg-2: #F4F8F4; --bg-3: #EAF2EA; --border: rgba(0,0,0,.07); --border-2: rgba(0,0,0,.12); --red: #E8304A; --gold: #C9860A; --white: #FFFFFF; --f-display: 'Bebas Neue', sans-serif; --f-body: 'Plus Jakarta Sans', sans-serif; --sp-1: .5rem; --sp-2: .75rem; --sp-3: 1rem; --sp-4: 1.5rem; --sp-5: 2rem; --sp-6: 3rem; --sp-7: 4.5rem; --sp-8: 6rem; --sp-9: 8rem; --r-s: 8px; --r-m: 14px; --r-l: 22px; --r-xl: 32px; --r-f: 9999px; --sh-s: 0 2px 12px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04); --sh-m: 0 6px 28px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.04); --sh-lg: 0 12px 48px rgba(0,0,0,.12); --sh-g: var(--green-glow); --ease: cubic-bezier(.16,1,.3,1); --t-f: 180ms; --t-m: 300ms; --max: 1220px; --nav: 70px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased} body{font-family:var(--f-body);background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden} img{max-width:100%;display:block} a{text-decoration:none;color:inherit} ul{list-style:none} button{cursor:pointer;font-family:inherit;border:none;background:none} .container{max-width:var(--max);margin:0 auto;padding:0 var(--sp-5)} @media(max-width:768px){.container{padding:0 var(--sp-4)}} /* ── TOKENS ─────────────────────────────────────── */ .green{color:var(--green)} .section-tag{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-d);border:1px solid var(--green-16);background:var(--green-08);padding:.32rem .8rem;border-radius:var(--r-f);margin-bottom:var(--sp-4)} .section-tag--light{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.14)} .section-h2{font-family:var(--f-display);font-size:clamp(2.2rem,4.5vw,3.8rem);line-height:1.04;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-bottom:var(--sp-6)} /* ── BUTTONS ────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--f-body);font-size:.88rem;font-weight:700;letter-spacing:.03em;border-radius:var(--r-f);padding:.72rem 1.4rem;white-space:nowrap;transition:transform var(--t-f) var(--ease),box-shadow var(--t-f) var(--ease),background var(--t-f),color var(--t-f)} .btn--primary{background:var(--green);color:#fff;box-shadow:0 4px 18px rgba(0,176,107,.28)} .btn--primary:hover{background:var(--green-d);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,176,107,.38)} .btn--outline{background:transparent;color:var(--ink);border:1.5px solid var(--border-2)} .btn--outline:hover{border-color:var(--ink);background:var(--bg-2);transform:translateY(-2px)} .btn--ghost{background:transparent;color:var(--ink-3);border:1px solid var(--border)} .btn--ghost:hover{color:var(--ink);border-color:var(--border-2)} .btn--white{background:#fff;color:var(--ink);box-shadow:var(--sh-s)} .btn--white:hover{transform:translateY(-2px);box-shadow:var(--sh-m)} .btn--sm{padding:.46rem 1rem;font-size:.8rem} .btn--lg{padding:.86rem 1.7rem;font-size:.96rem} /* ── REVEALS ────────────────────────────────────── */ /* Elements only hide if JS is running (js class on ) */ .js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .js .reveal.in{opacity:1;transform:none} /* Non-js fallback: always visible */ .reveal--d1{transition-delay:.08s} .reveal--d2{transition-delay:.16s} .reveal--d3{transition-delay:.24s} .reveal--d4{transition-delay:.32s} /* ══════════════════════════════════════════════════ NAV ══════════════════════════════════════════════════ */ .nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav);transition:background var(--t-m),box-shadow var(--t-m)} .nav.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 1px 0 var(--border),0 4px 20px rgba(0,0,0,.06)} .nav__inner{display:flex;align-items:center;height:100%;gap:var(--sp-5)} .nav__logo{display:flex;align-items:center;gap:.55rem;flex-shrink:0} .logo-mark{width:32px;height:32px;background:var(--green);color:#fff;border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:1.1rem} .logo-text{font-family:var(--f-display);font-size:1.3rem;letter-spacing:.06em;color:var(--ink);text-transform:uppercase} .nav__links{display:flex;gap:var(--sp-1);margin-left:auto} .nav__links a{font-size:.83rem;font-weight:600;color:var(--ink-3);padding:.32rem .7rem;border-radius:var(--r-f);transition:color var(--t-f),background var(--t-f)} .nav__links a:hover{color:var(--ink)} .nav__links a.active{color:var(--green);font-weight:700;background:var(--green-08)} .nav__cta{display:flex;gap:.6rem;flex-shrink:0} .nav__burger{display:none;flex-direction:column;gap:5px;padding:8px;margin-left:auto} .nav__burger span{display:block;width:21px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--t-m),opacity var(--t-m)} .nav__mobile{display:none;position:absolute;top:var(--nav);left:0;right:0;background:rgba(255,255,255,.97);backdrop-filter:blur(18px);padding:var(--sp-5);flex-direction:column;gap:var(--sp-4);border-top:1px solid var(--border);box-shadow:var(--sh-m);transform:translateY(-8px);opacity:0;pointer-events:none;transition:transform var(--t-m) var(--ease),opacity var(--t-m)} .nav__mobile.open{transform:none;opacity:1;pointer-events:all} .nav__mobile ul{display:flex;flex-direction:column;gap:var(--sp-3)} .nav__mobile a{font-size:1rem;font-weight:600;color:var(--ink-2)} .nav__mobile a:hover{color:var(--green)} @media(max-width:860px){.nav__links,.nav__cta{display:none}.nav__burger{display:flex}.nav__mobile{display:flex}} /* ══════════════════════════════════════════════════ HERO ══════════════════════════════════════════════════ */ .hero{min-height:100svh;padding:calc(var(--nav) + var(--sp-7)) 0 var(--sp-8);position:relative;overflow:hidden;display:flex;align-items:center;background:var(--bg)} .hero__dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,176,107,.14) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse 60% 70% at 68% 44%,black 25%,transparent 75%)} .hero__glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none} .hero__glow--a{width:640px;height:640px;background:radial-gradient(circle,rgba(0,176,107,.09),transparent 65%);top:-180px;right:-60px;animation:gfloat 9s ease-in-out infinite} .hero__glow--b{width:480px;height:480px;background:radial-gradient(circle,rgba(0,176,107,.06),transparent 65%);bottom:-60px;left:-80px;animation:gfloat 11s ease-in-out infinite reverse} @keyframes gfloat{0%,100%{transform:translate(0,0)}50%{transform:translate(22px,-22px)}} .hero__inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);align-items:center;position:relative;z-index:1} .hero__eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--sp-4)} .pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;animation:pdot 2s ease-in-out infinite} @keyframes pdot{0%,100%{box-shadow:0 0 0 0 rgba(0,176,107,.5)}50%{box-shadow:0 0 0 5px transparent}} .hero__h1{font-family:var(--f-display);font-size:clamp(3.4rem,6.5vw,6.2rem);line-height:1;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);margin-bottom:var(--sp-5)} .hero__h1 em{font-style:italic;color:var(--green)} .hero__sub{font-size:1.02rem;color:var(--ink-3);max-width:440px;margin-bottom:var(--sp-6);line-height:1.75} .hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-7)} .hero__proof{display:flex;align-items:center;gap:var(--sp-5)} .proof-item{display:flex;flex-direction:column;gap:2px} .proof-item strong{font-family:var(--f-display);font-size:1.7rem;letter-spacing:.04em;color:var(--green);line-height:1} .proof-item span{font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)} .proof-sep{width:1px;height:32px;background:var(--border-2)} /* Phone */ .hero__phone{display:flex;justify-content:center;align-items:flex-start;position:relative;padding-top:var(--sp-4)} .phone{position:relative;width:272px;flex-shrink:0} .phone__frame{background:var(--bg-2);border-radius:36px;border:1.5px solid var(--border-2);padding:13px;box-shadow:var(--sh-lg),inset 0 1px 0 rgba(255,255,255,.9);position:relative;z-index:2} .phone__screen{background:#fff;border-radius:26px;overflow:hidden;min-height:460px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)} .phone__glow{position:absolute;inset:-2px;border-radius:38px;background:radial-gradient(ellipse at 50% 108%,rgba(0,176,107,.18),transparent 52%);z-index:1;filter:blur(16px)} .app{padding:1.1rem;display:flex;flex-direction:column;gap:.9rem;background:#f6faf7} .app__header{display:flex;align-items:center;gap:.55rem} .app__avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green-d));flex-shrink:0} .app__hi{font-size:.58rem;color:var(--ink-4)} .app__name{font-size:.74rem;font-weight:700;color:var(--ink)} .app__bell{margin-left:auto;position:relative;color:var(--ink-3);font-size:.95rem} .bell-dot{position:absolute;top:0;right:0;width:5px;height:5px;border-radius:50%;background:var(--red);border:1px solid #f6faf7} .app__rank{background:linear-gradient(135deg,var(--green-d),var(--green));border-radius:var(--r-m);padding:.8rem .95rem;color:#fff} .rank-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem} .rank-lbl{font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;opacity:.8} .rank-badge{font-family:var(--f-display);font-size:.95rem;letter-spacing:.04em} .rank-bar{height:3px;background:rgba(255,255,255,.25);border-radius:3px;overflow:hidden;margin-bottom:.28rem} .rank-fill{height:100%;width:72%;background:rgba(255,255,255,.88);border-radius:3px} .rank-pts{font-size:.56rem;opacity:.72} .app__section-lbl{font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)} .app__card{background:#fff;border-radius:var(--r-m);padding:.7rem;border:1px solid var(--border);box-shadow:var(--sh-s)} .app__card--dim{opacity:.55} .card-tag{display:inline-block;font-size:.52rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--green);color:#fff;border-radius:var(--r-f);padding:.12rem .45rem;margin-bottom:.35rem} .card-tag--muted{background:var(--bg-3);color:var(--ink-3)} .card-title{font-size:.7rem;font-weight:700;color:var(--ink)} .card-meta{display:flex;gap:.7rem;font-size:.57rem;color:var(--ink-4);margin:.22rem 0} .card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.3rem} .card-price{font-size:.72rem;font-weight:700;color:var(--green)} .card-price small{font-weight:400;color:var(--ink-4);font-size:.55rem} .card-join{background:var(--green);color:#fff;border-radius:var(--r-f);font-size:.58rem;font-weight:700;padding:.22rem .65rem} .badge{position:absolute;background:#fff;border:1px solid var(--border-2);border-radius:var(--r-m);padding:.55rem .9rem;display:flex;align-items:center;gap:.45rem;font-size:.76rem;font-weight:700;color:var(--ink);box-shadow:var(--sh-m);animation:bfloat 4s ease-in-out infinite;white-space:nowrap;z-index:3} .badge i{color:var(--green);font-size:.95rem} .badge--a{top:14px;right:-18px;animation-delay:.4s} .badge--b{bottom:72px;left:-26px;animation-delay:1.4s;border-color:var(--green-16);background:#edfff5} @keyframes bfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} .hero__scroll{position:absolute;bottom:var(--sp-5);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;color:var(--ink-4);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase} .scroll-bar{width:1px;height:36px;background:linear-gradient(to bottom,transparent,var(--green));animation:sbar 2s ease-in-out infinite} @keyframes sbar{0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(.5);opacity:.4}} @media(max-width:860px){.hero__inner{grid-template-columns:1fr;gap:var(--sp-7);text-align:center}.hero__sub{max-width:100%}.hero__actions{justify-content:center}.hero__proof{justify-content:center}.hero__phone{padding-top:0}.badge--a{right:0;top:-8px}.badge--b{left:0;bottom:36px}} @media(max-width:440px){.phone{width:240px}} /* ══════════════════════════════════════════════════ PLATFORM ══════════════════════════════════════════════════ */ .platform{padding:var(--sp-9) 0;background:var(--bg-2)} .platform__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:center} .platform__lead{font-size:1.05rem;line-height:1.75;color:var(--ink-3);margin-bottom:var(--sp-5)} .platform__pillars{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-5)} .pill{display:flex;align-items:center;gap:.5rem;padding:.55rem 1rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-f);font-size:.78rem;font-weight:700;color:var(--ink-2);box-shadow:var(--sh-s);transition:border-color var(--t-f),box-shadow var(--t-f),transform var(--t-f)} .pill:hover{border-color:var(--green-16);box-shadow:var(--sh-g);transform:translateY(-1px)} .pill i{color:var(--green);font-size:.95rem} .platform__audience{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-4);background:var(--bg);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--sh-s)} .aud-label{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);margin-right:.25rem} .aud-chips{display:flex;flex-wrap:wrap;gap:.5rem} .aud-chips span{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:600;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-f);padding:.28rem .7rem;transition:border-color var(--t-f),color var(--t-f)} .aud-chips span:hover{border-color:var(--green-16);color:var(--green-d)} .aud-chips i{color:var(--green);font-size:.85rem} /* Ecosystem */ .platform__eco{display:flex;justify-content:center;align-items:center} .eco{position:relative;width:320px;height:320px;display:flex;align-items:center;justify-content:center} .eco__hub{position:relative;z-index:3;width:84px;height:84px;background:var(--green);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:1px;box-shadow:var(--sh-g)} .eco__t{font-family:var(--f-display);font-size:1.9rem;line-height:1} .eco__name{font-size:.54rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.82} .eco__ring{position:absolute;border-radius:50%;border:1.5px solid var(--green-16);animation:rpulse 3s ease-in-out infinite} .eco__ring--1{width:168px;height:168px} .eco__ring--2{width:302px;height:302px;animation-delay:.5s} @keyframes rpulse{0%,100%{opacity:.38;transform:scale(1)}50%{opacity:.72;transform:scale(1.018)}} .eco__nodes{position:absolute;inset:0} .eco__node{position:absolute;top:50%;left:50%;--r:138px;transform:rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))) translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--bg);border:1.5px solid var(--border-2);border-radius:var(--r-m);padding:.65rem .9rem;width:80px;box-shadow:var(--sh-s);transition:border-color var(--t-f),box-shadow var(--t-f)} .eco__node:hover{border-color:var(--green);box-shadow:var(--sh-g)} .eco__node i{font-size:1.2rem;color:var(--green)} .eco__node span{font-size:.6rem;font-weight:700;letter-spacing:.04em;color:var(--ink-3)} @media(max-width:860px){.platform__grid{grid-template-columns:1fr}.platform__eco{order:-1}.eco{width:268px;height:268px}.eco__node{--r:116px}.eco__ring--1{width:138px;height:138px}.eco__ring--2{width:252px;height:252px}} /* ══════════════════════════════════════════════════ PROBLEM / SOLUTION ══════════════════════════════════════════════════ */ .ps{padding:var(--sp-9) 0;background:var(--bg)} .ps .section-h2{margin-bottom:var(--sp-7)} .ps__grid{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--sp-5);align-items:start} .ps__col{background:var(--bg);border:1px solid var(--border-2);border-radius:var(--r-xl);padding:var(--sp-6);box-shadow:var(--sh-s)} .ps__badge{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-f);padding:.28rem .85rem;border:1px solid;margin-bottom:var(--sp-5)} .ps__badge--red{color:var(--red);border-color:rgba(232,48,74,.25);background:rgba(232,48,74,.06)} .ps__badge--green{color:var(--green-d);border-color:var(--green-16);background:var(--green-08)} .ps__list{display:flex;flex-direction:column;gap:var(--sp-4)} .ps__list li{display:flex;gap:var(--sp-3);align-items:flex-start} .ps__list i{font-size:1.15rem;color:var(--red);margin-top:.1rem;flex-shrink:0} .ps__col--good .ps__list i{color:var(--green)} .ps__list strong{display:block;font-size:.88rem;margin-bottom:.18rem;color:var(--ink)} .ps__list p{font-size:.8rem;color:var(--ink-3);line-height:1.6} .ps__arrow{display:flex;align-items:center;justify-content:center;padding-top:var(--sp-8)} .ps__arrow-circle{width:44px;height:44px;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.05rem;box-shadow:var(--sh-g);flex-shrink:0} @media(max-width:860px){.ps__grid{grid-template-columns:1fr}.ps__arrow{padding:0;transform:rotate(90deg)}} /* ══════════════════════════════════════════════════ FEATURES + HOW IT WORKS ══════════════════════════════════════════════════ */ .features{padding:var(--sp-9) 0;background:var(--bg-2)} .feat__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-bottom:var(--sp-8)} .feat-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-l);padding:var(--sp-6);box-shadow:var(--sh-s);transition:border-color var(--t-m),transform var(--t-m),box-shadow var(--t-m)} .feat-card:hover{border-color:var(--green-28);transform:translateY(-3px);box-shadow:var(--sh-g)} .feat-card--accent{background:linear-gradient(135deg,rgba(0,176,107,.05),var(--bg));border-color:var(--green-16)} .feat-card__icon{width:48px;height:48px;background:var(--green-08);border-radius:var(--r-m);display:flex;align-items:center;justify-content:center;color:var(--green);font-size:1.3rem;margin-bottom:var(--sp-4);transition:background var(--t-f)} .feat-card:hover .feat-card__icon{background:var(--green-16)} .feat-card h3{font-size:.95rem;font-weight:700;margin-bottom:.4rem;color:var(--ink)} .feat-card p{font-size:.82rem;color:var(--ink-3);line-height:1.68} @media(max-width:768px){.feat__grid{grid-template-columns:1fr 1fr}} @media(max-width:500px){.feat__grid{grid-template-columns:1fr}} /* How strip */ .how{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-6) var(--sp-6);box-shadow:var(--sh-s)} .how__label{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:var(--sp-5);text-align:center} .how__steps{display:flex;align-items:flex-start;overflow-x:auto;padding-bottom:var(--sp-1)} .how__step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55rem;flex:1;min-width:110px;padding:0 var(--sp-3)} .how__num{font-family:var(--f-display);font-size:.75rem;letter-spacing:.1em;color:var(--green);opacity:.55} .how__icon{width:52px;height:52px;background:var(--bg-2);border:1.5px solid var(--border-2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--green);transition:background var(--t-f),border-color var(--t-f),box-shadow var(--t-f)} .how__step:hover .how__icon{background:var(--green-08);border-color:var(--green);box-shadow:var(--sh-g)} .how__text strong{display:block;font-size:.82rem;font-weight:700;color:var(--ink);margin-bottom:.14rem} .how__text span{font-size:.72rem;color:var(--ink-4)} .how__line{width:40px;height:1px;background:linear-gradient(90deg,var(--green-16),rgba(0,176,107,.06));margin-top:26px;flex-shrink:0;align-self:flex-start} @media(max-width:600px){.how__steps{flex-direction:column;align-items:flex-start}.how__step{flex-direction:row;text-align:left;min-width:0}.how__line{width:1px;height:28px;margin:0 0 0 26px;align-self:auto;background:linear-gradient(to bottom,var(--green-16),transparent)}} /* ══════════════════════════════════════════════════ CREDIBILITY ══════════════════════════════════════════════════ */ .cred{padding:var(--sp-9) 0;background:var(--bg)} .cred__awards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-bottom:var(--sp-8)} /* Photo award cards */ .award-photo{background:var(--bg);border:1px solid var(--border-2);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-s);transition:border-color var(--t-m),transform var(--t-m),box-shadow var(--t-m)} .award-photo:hover{border-color:var(--green-28);transform:translateY(-3px);box-shadow:var(--sh-g)} .award-photo__img{position:relative;height:200px;background:var(--bg-3);overflow:hidden} .award-photo__img img{width:100%;height:100%;object-fit:cover;display:block} .award-photo__placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:var(--ink-4)} .award-photo__img img + .award-photo__placeholder{display:none} /* hide placeholder when img loads */ .award-photo__placeholder i{font-size:2rem;opacity:.4} .award-photo__placeholder span{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.4} .award-photo__body{padding:var(--sp-5)} .award-photo__year{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green);display:block;margin-bottom:.3rem} .award-photo__body h3{font-size:.9rem;font-weight:700;line-height:1.35;margin-bottom:.28rem;color:var(--ink)} .award-photo__rank{font-size:.78rem;font-weight:700;color:var(--gold);margin-bottom:.3rem} .award-photo__body p{font-size:.78rem;color:var(--ink-3);line-height:1.6} @media(max-width:768px){.cred__awards{grid-template-columns:1fr}.award-photo__img{height:160px}} /* Stats strip */ .cred__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);padding:var(--sp-7) 0;border-top:1px solid var(--border-2)} .stat{text-align:center;padding:var(--sp-4)} .stat__num{font-family:var(--f-display);font-size:clamp(2.2rem,4.5vw,3.6rem);letter-spacing:.03em;color:var(--green);line-height:1;margin-bottom:.3rem} .stat__lbl{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)} @media(max-width:600px){.cred__stats{grid-template-columns:1fr 1fr}} /* ══════════════════════════════════════════════════ PRODUCT PREVIEW ══════════════════════════════════════════════════ */ .product{padding:var(--sp-9) 0;background:var(--bg-2)} .product__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);align-items:start} .screen{background:var(--bg);border:1px solid var(--border-2);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-m);transition:border-color var(--t-m),transform var(--t-m),box-shadow var(--t-m)} .screen:hover{border-color:var(--green-28);transform:translateY(-4px);box-shadow:var(--sh-g)} .screen__bar{display:flex;align-items:center;gap:.35rem;padding:.7rem .9rem;border-bottom:1px solid var(--border);background:var(--bg-2)} .screen__dot{width:9px;height:9px;border-radius:50%} .screen__dot:nth-child(1){background:rgba(232,48,74,.5)} .screen__dot:nth-child(2){background:rgba(201,134,10,.5)} .screen__dot:nth-child(3){background:rgba(0,176,107,.5)} .screen__title{font-size:.66rem;font-weight:600;color:var(--ink-4);margin-left:.25rem} .screen__body{padding:.9rem} /* Discovery */ .sc-map{height:110px;background:#e4f2e9;border-radius:var(--r-m);margin-bottom:.7rem;position:relative;overflow:hidden} .sc-map__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,176,107,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(0,176,107,.09) 1px,transparent 1px);background-size:18px 18px} .sc-pin{position:absolute;width:26px;height:26px;background:#fff;border:1.5px solid var(--border-2);border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;color:var(--ink-4);box-shadow:var(--sh-s)} .sc-pin i{transform:rotate(45deg);font-size:.72rem} .sc-pin--1{top:28px;left:36px} .sc-pin--2{top:56px;left:90px} .sc-pin--active{top:18px;right:44px;background:var(--green);border-color:var(--green);color:#fff;animation:pinb 1.5s ease-in-out infinite} @keyframes pinb{0%,100%{transform:rotate(-45deg) translateY(0)}50%{transform:rotate(-45deg) translateY(-4px)}} .sc-game-row{display:flex;align-items:center;gap:.55rem;background:var(--bg-2);border-radius:var(--r-m);padding:.55rem .7rem;border:1px solid var(--border);margin-bottom:.4rem} .sc-game-row--dim{opacity:.55;margin-bottom:0} .sc-dot{width:6px;height:6px;border-radius:50%;background:var(--border-2);flex-shrink:0} .sc-dot--live{background:var(--green);animation:pdot 2s infinite} .sc-row-name{font-size:.66rem;font-weight:700;color:var(--ink)} .sc-row-meta{font-size:.58rem;color:var(--ink-4)} .sc-row-price{margin-left:auto;font-size:.68rem;font-weight:700;color:var(--green)} /* Profile */ .screen__body--profile{display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:1.3rem .9rem} .sc-avatar{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green-d));border:2.5px solid #fff;box-shadow:0 0 0 2px var(--green-16)} .sc-pname{font-size:.86rem;font-weight:700;color:var(--ink)} .sc-prank{font-size:.6rem;font-weight:600;color:var(--gold);background:rgba(201,134,10,.1);border:1px solid rgba(201,134,10,.2);border-radius:var(--r-f);padding:.18rem .55rem} .sc-stats{display:flex;gap:.7rem;width:100%;margin:.2rem 0} .sc-stat{flex:1;text-align:center;background:var(--bg-2);border-radius:var(--r-m);padding:.5rem;border:1px solid var(--border)} .sc-stat__v{font-family:var(--f-display);font-size:1.2rem;color:var(--green)} .sc-stat__l{font-size:.54rem;color:var(--ink-4);font-weight:600;text-transform:uppercase;letter-spacing:.04em} .sc-chips{display:flex;flex-wrap:wrap;gap:.28rem;justify-content:center} .sc-chips span{font-size:.56rem;padding:.18rem .45rem;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-f);color:var(--ink-2)} /* Booking */ .screen__body--booking{display:flex;flex-direction:column;gap:.65rem} .sc-field-name{font-size:.8rem;font-weight:700;color:var(--ink)} .sc-field-meta{font-size:.62rem;color:var(--ink-4)} .sc-field-meta i{color:var(--gold)} .sc-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem} .sc-slot{font-size:.62rem;font-weight:700;text-align:center;padding:.36rem;border-radius:var(--r-s);border:1px solid} .sc-slot--taken{color:var(--ink-4);border-color:var(--border);background:var(--bg-2);text-decoration:line-through} .sc-slot--open{color:var(--green-d);border-color:var(--green-16);background:var(--green-08);cursor:pointer} .sc-slot--open:hover{background:var(--green-16)} .sc-bsummary{display:flex;align-items:center;justify-content:space-between;background:var(--bg-2);border-radius:var(--r-m);padding:.55rem .7rem;font-size:.64rem;color:var(--ink-2);border:1px solid var(--border)} .sc-bbtn{background:var(--green);color:#fff;border-radius:var(--r-f);font-size:.62rem;font-weight:700;padding:.28rem .7rem} /* Leaderboard */ .screen__body--lb{display:flex;flex-direction:column;gap:.42rem} .sc-lb-row{display:flex;align-items:center;gap:.55rem;background:var(--bg-2);border-radius:var(--r-m);padding:.46rem .7rem;border:1px solid var(--border)} .sc-lb-row--gold{border-color:rgba(201,134,10,.28);background:rgba(201,134,10,.06)} .sc-lb-row--you{border-color:var(--green-16);background:var(--green-08)} .sc-lb-pos{font-size:.6rem;font-weight:700;color:var(--ink-4);width:13px} .sc-lb-av{width:22px;height:22px;border-radius:50%;background:var(--bg-3);flex-shrink:0} .sc-lb-av--gold{background:linear-gradient(135deg,#FFD166,#b87a00)} .sc-lb-av--green{background:linear-gradient(135deg,var(--green),var(--green-d))} .sc-lb-name{font-size:.66rem;font-weight:600;flex:1;color:var(--ink)} .sc-lb-name em{font-style:normal;color:var(--green);font-size:.58rem} .sc-lb-pts{font-size:.62rem;font-weight:700;color:var(--green)} @media(max-width:900px){.product__grid{grid-template-columns:1fr 1fr}} @media(max-width:500px){.product__grid{grid-template-columns:1fr}} /* ══════════════════════════════════════════════════ FINAL CTA ══════════════════════════════════════════════════ */ .cta{padding:var(--sp-9) 0;background:var(--ink);position:relative;overflow:hidden} .cta__bg{position:absolute;inset:0;background:radial-gradient(ellipse 65% 65% at 18% 50%,rgba(0,176,107,.17),transparent),radial-gradient(ellipse 45% 55% at 88% 50%,rgba(0,176,107,.09),transparent)} .cta__inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:start;position:relative;z-index:1} .cta__h2{font-family:var(--f-display);font-size:clamp(2.8rem,5.5vw,4.8rem);line-height:1;text-transform:uppercase;letter-spacing:.02em;color:#fff;margin-bottom:var(--sp-5)} .cta__sub{color:rgba(255,255,255,.68);font-size:.98rem;line-height:1.75;max-width:420px;margin-bottom:var(--sp-6)} .cta__btns{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-3)} .cta__note{font-size:.74rem;color:rgba(255,255,255,.35)} .partner-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);border-radius:var(--r-xl);padding:var(--sp-6);backdrop-filter:blur(8px)} .partner-box__icon{width:48px;height:48px;background:var(--green);border-radius:var(--r-m);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;margin-bottom:var(--sp-4);box-shadow:var(--sh-g)} .partner-box h3{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.4rem} .partner-box>p{font-size:.84rem;color:rgba(255,255,255,.62);line-height:1.68;margin-bottom:var(--sp-5)} .partner-list{display:flex;flex-direction:column;gap:.55rem;margin-bottom:var(--sp-5)} .partner-list li{display:flex;align-items:center;gap:.55rem;font-size:.84rem;color:rgba(255,255,255,.68)} .partner-list i{color:var(--green);font-size:.88rem} .partner-email{margin-top:.6rem;font-size:.74rem;color:rgba(255,255,255,.32)} @media(max-width:860px){.cta__inner{grid-template-columns:1fr}} /* ══════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════ */ .footer{background:var(--bg-2);border-top:1px solid var(--border);padding:var(--sp-8) 0 var(--sp-5)} .footer__inner{display:grid;grid-template-columns:1fr 2fr;gap:var(--sp-8);margin-bottom:var(--sp-7);padding-bottom:var(--sp-7);border-bottom:1px solid var(--border)} .footer__brand p{font-size:.84rem;color:var(--ink-3);line-height:1.68;margin:var(--sp-4) 0;max-width:210px;font-style:italic} .footer__social{display:flex;gap:.7rem} .footer__social a{width:34px;height:34px;background:var(--bg);border:1px solid var(--border-2);border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:.88rem;box-shadow:var(--sh-s);transition:color var(--t-f),border-color var(--t-f),box-shadow var(--t-f)} .footer__social a:hover{color:var(--green);border-color:var(--green-16);box-shadow:var(--sh-g)} .footer__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)} .footer__col h4{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:var(--sp-4)} .footer__col ul{display:flex;flex-direction:column;gap:.6rem} .footer__col a,.footer__col span{font-size:.84rem;color:var(--ink-3);transition:color var(--t-f)} .footer__col a:hover{color:var(--green)} .footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-3)} .footer__bottom p{font-size:.76rem;color:var(--ink-4)} .footer__bottom div{display:flex;gap:var(--sp-4)} .footer__bottom a{font-size:.76rem;color:var(--ink-4);transition:color var(--t-f)} .footer__bottom a:hover{color:var(--ink)} @media(max-width:768px){.footer__inner{grid-template-columns:1fr;gap:var(--sp-6)}.footer__nav{grid-template-columns:1fr 1fr}.footer__bottom{flex-direction:column;align-items:flex-start}} @media(max-width:480px){.footer__nav{grid-template-columns:1fr}} /* ── WordPress Theme Conflict Overrides ────────── */ .hero__inner{display:grid!important;grid-template-columns:1fr 1fr!important;align-items:center!important} .platform__grid{display:grid!important;grid-template-columns:1fr 1fr!important} .ps__grid{display:grid!important;grid-template-columns:1fr auto 1fr!important} .feat__grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important} .product__grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important} .cta__inner{display:grid!important;grid-template-columns:1fr 1fr!important} .how__steps{display:flex!important} .hero__phone{display:flex!important;visibility:visible!important;opacity:1!important} .phone,.phone__frame,.phone__screen{display:block!important;visibility:visible!important} .btn--outline{border:1.5px solid rgba(0,0,0,.14)!important;background:transparent!important;color:var(--ink)!important} .btn--outline:hover{border-color:var(--ink)!important;background:var(--bg-2)!important} .eco,.eco__nodes,.eco__hub{display:flex!important;visibility:visible!important} @media(max-width:860px){ .hero__inner{grid-template-columns:1fr!important} .platform__grid{grid-template-columns:1fr!important} .ps__grid{grid-template-columns:1fr!important} .cta__inner{grid-template-columns:1fr!important} .feat__grid{grid-template-columns:1fr 1fr!important} .product__grid{grid-template-columns:1fr 1fr!important} } @media(max-width:500px){ .feat__grid{grid-template-columns:1fr!important} .product__grid{grid-template-columns:1fr!important} } /* ── Break out of WordPress content width constraints ── */ .wp-block-html, .entry-content, .wp-site-blocks, .is-root-container, .wp-block-post-content, .wp-block-group, .alignfull, .wp-block-template-part, main.wp-block-group { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } body { max-width: 100% !important; overflow-x: hidden !important; margin: 0 !important; padding: 0 !important; } .hero, .platform, .ps, .features, .how, .cred, .product, .cta, .footer { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } /* ── SMALL PHONE fixes (≤ 420px) ──────────────────── */ @media(max-width:420px){ /* Hero proof bar: wrap cleanly */ .hero__proof{flex-wrap:wrap;gap:var(--sp-3);justify-content:center} .proof-sep{display:none} .proof-item{align-items:center} /* Floating badges: tuck in, no overflow */ .badge{font-size:.68rem;padding:.42rem .7rem} .badge--a{right:4px;top:-4px} .badge--b{left:4px;bottom:28px} /* Phone mockup */ .phone{width:min(240px,85vw)} /* Ecosystem: shrink more */ .eco{width:240px;height:240px} .eco__node{--r:102px} .eco__ring--1{width:120px;height:120px} .eco__ring--2{width:224px;height:224px} .eco__hub{width:72px;height:72px} .eco__t{font-size:1.5rem} /* Problem/Solution: less padding */ .ps__col{padding:var(--sp-4)} /* How steps: tighten */ .how{padding:var(--sp-4)} /* Section headings */ .section-h2{font-size:clamp(1.9rem,8vw,2.4rem)} .hero__h1{font-size:clamp(2.8rem,11vw,4rem)} /* CTA + hero action buttons: full width stacked */ .cta__btns,.hero__actions{flex-direction:column;align-items:center} .cta__btns .btn,.hero__actions .btn{width:100%;justify-content:center} /* Feature cards: less padding */ .feat-card{padding:var(--sp-4)} /* Award photo */ .award-photo__img{height:130px} /* Stats: tighter */ .stat{padding:var(--sp-3)} } .logo-image{ width:80px; height:80px; object-fit:contain; display:block; flex-shrink:0; } .logo-mark{ display:none; } .eco__logo{ width:44px; height:44px; object-fit:contain; display:block; } .app-shot{ width:100%; height:100%; display:block; object-fit:cover; object-position:top center; } .award-photo__img img{ width:100%; height:100%; object-fit:cover; object-position:center center; display:block; } .award-img--contain{ object-fit: contain !important; object-position: center center !important; background: #fff; padding: 12px; }