/* ═══════════════════════════════════════════════════════════
   TRAKVEN — Premium marketing site
   Aesthetic: warm, calm, vibrant neo-pop (matches the app)
   ═══════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* surfaces */
  --bg:        #FBFAF7;
  --bg-warm:   #FFF7EF;
  --surface:   #FFFFFF;
  --ink:       #0A0A0A;
  --ink-2:     #52525B;
  --ink-3:     #8A8A93;
  --line:      #ECEAE4;
  --line-2:    #E4E4E7;

  /* brand + pillars (from the real app) */
  --orange:    #F97316;
  --orange-d:  #EA580C;
  --teal:      #0EA5E9;
  --blue:      #2563EB;
  --green:     #10B981;
  --violet:    #7C3AED;
  --amber:     #F59E0B;
  --pink:      #FF0055;

  --font-head: 'Outfit', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --maxw: 1280px;
  --nav-h: 74px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --shadow-sm: 0 2px 8px rgba(15,23,42,.05);
  --shadow-md: 0 14px 34px rgba(15,23,42,.09);
  --shadow-lg: 0 40px 90px rgba(15,23,42,.16);
  --shadow-device: 0 50px 110px -20px rgba(20,16,40,.40), 0 18px 44px -16px rgba(20,16,40,.30);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:auto;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(249,115,22,.2)}

::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#d8d6cf;border-radius:5px;border:2px solid var(--bg)}

.container{max-width:var(--maxw);margin:0 auto;padding:0 32px;width:100%}

/* grain */
.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* scroll progress */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--orange),var(--amber),var(--teal));
  box-shadow:0 0 12px rgba(249,115,22,.5);
  transition:width .1s linear;
}

/* ── reveal base ── */
[data-anim]{opacity:0;will-change:transform,opacity}
[data-anim].in{opacity:1}
[data-anim="fade-up"]{transform:translateY(34px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-anim="fade-up"].in{transform:none}
[data-anim="rise"]{transform:translateY(60px) scale(.96);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
[data-anim="rise"].in{transform:none}
[data-anim="hero-phones"]{transform:translateY(40px) scale(.95);transition:opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out)}
[data-anim="hero-phones"].in{transform:none}
[data-anim="bento"].in,[data-anim="lines"].in{opacity:1}

/* ═══════════════ NAV ═══════════════ */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:1000;
  transition:background .4s,backdrop-filter .4s,border-color .4s,box-shadow .4s;
  border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(251,250,247,.8);backdrop-filter:blur(20px) saturate(1.4);
  border-color:var(--line);box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
.nav-inner{max-width:var(--maxw);margin:0 auto;height:100%;padding:0 32px;
  display:flex;align-items:center;gap:36px}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo-img{width:36px;height:36px;filter:drop-shadow(0 4px 10px rgba(249,115,22,.25))}
.nav-logo-text{font-family:var(--font-head);font-weight:700;font-size:21px;letter-spacing:-.5px}
.nav-links{display:flex;gap:30px;list-style:none;margin-left:auto}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-2);transition:color .2s;position:relative}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-5px;width:0;height:2px;
  background:var(--orange);border-radius:2px;transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:100px;
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:600;
  transition:transform .25s var(--ease),box-shadow .25s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(10,10,10,.25)}
.nav-cta-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.6);
  animation:ping 1.8s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}

/* ═══════════════ HERO ═══════════════ */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;
  padding-top:var(--nav-h);overflow:hidden;
  background:
    radial-gradient(120% 80% at 80% -10%, #FFF3E6 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 100%, #EAF7FE 0%, transparent 60%),
    var(--bg);}
.aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.ab1{width:560px;height:560px;background:radial-gradient(circle,#FFB877,#F97316 70%);top:-140px;right:-80px;animation:drift1 18s ease-in-out infinite}
.ab2{width:480px;height:480px;background:radial-gradient(circle,#7DDcFB,#0EA5E9 70%);bottom:-160px;left:-100px;opacity:.42;animation:drift2 22s ease-in-out infinite}
.ab3{width:380px;height:380px;background:radial-gradient(circle,#C4B0FB,#7C3AED 70%);top:30%;left:35%;opacity:.28;animation:drift3 26s ease-in-out infinite}
.ab4{width:300px;height:300px;background:radial-gradient(circle,#8EF0C8,#10B981 70%);bottom:10%;right:25%;opacity:.22;animation:drift1 20s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,40px) scale(1.08)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,-30px) scale(1.1)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,40px) scale(.92)}}
.hero-grid-lines{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4;
  background-image:linear-gradient(rgba(10,10,10,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,10,.025) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 30%,transparent 75%);
  mask-image:radial-gradient(120% 100% at 50% 0%,#000 30%,transparent 75%);}

.hero-inner{position:relative;z-index:2;flex:1;width:100%;max-width:var(--maxw);
  margin:0 auto;padding:48px 32px 40px;display:grid;
  grid-template-columns:1.02fr .98fr;gap:40px;align-items:center}

.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;
  background:rgba(255,255,255,.7);border:1px solid var(--line-2);border-radius:100px;
  font-size:13px;font-weight:600;color:var(--ink-2);box-shadow:var(--shadow-sm);
  backdrop-filter:blur(10px);margin-bottom:26px}
.eyebrow-icon{width:24px;height:24px;border-radius:7px}

.hero-title{font-family:var(--font-head);font-weight:800;
  font-size:clamp(44px,5.6vw,82px);line-height:1.02;letter-spacing:-2.5px;
  color:var(--ink);margin-bottom:26px}
.title-script{display:block;background:linear-gradient(115deg,#F97316 10%,#FB923C 45%,#0EA5E9 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  position:relative}
.hero-sub{font-size:clamp(16px,1.4vw,19px);line-height:1.7;color:var(--ink-2);
  max-width:520px;margin-bottom:36px}
.hero-sub strong{color:var(--ink);font-weight:700}

.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.btn{display:inline-flex;align-items:center;gap:12px;border-radius:16px;
  font-family:var(--font-body);cursor:pointer;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn-stack{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.btn-small{font-size:10.5px;opacity:.8;font-weight:500}
.btn-big{font-size:16px;font-weight:700;letter-spacing:-.3px}
.btn-primary{background:var(--ink);color:#fff;padding:12px 24px;box-shadow:0 14px 30px rgba(10,10,10,.22)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 44px rgba(10,10,10,.3)}
.btn-ghost{background:var(--surface);color:var(--ink);padding:12px 24px;border:1px solid var(--line-2);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.btn-shine{position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,60%{left:-120%}80%,100%{left:160%}}

.hero-trust{display:flex;gap:22px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-2);font-weight:500}
.trust-ic{font-size:15px}

/* hero scroll cue */
.hero-scroll{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:0 auto 26px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.hero-scroll-line{width:1px;height:42px;background:linear-gradient(var(--ink-3),transparent);position:relative;overflow:hidden}
.hero-scroll-line::after{content:'';position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--orange);animation:scrolldot 1.8s ease-in-out infinite}
@keyframes scrolldot{0%{top:-50%}100%{top:110%}}

/* ═══════════════ DEVICE / PHONE ═══════════════ */
.phone-stage{position:relative;width:100%;height:600px;display:flex;align-items:center;justify-content:center;
  perspective:1600px}
.phone{position:relative}
.device{position:relative;width:280px;border-radius:42px;background:#111016;
  padding:11px;box-shadow:var(--shadow-device);border:1px solid rgba(255,255,255,.08);
  transition:transform .3s var(--ease)}
.device-notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:104px;height:26px;background:#111016;border-radius:0 0 16px 16px;z-index:5}
.device-screen{border-radius:32px;overflow:hidden;height:560px;position:relative;
  display:flex;flex-direction:column;padding:14px 13px 16px}
.device-screen.light{background:#F8F9FB;color:var(--ink)}
.device-fab{position:absolute;bottom:22px;right:20px;width:46px;height:46px;border-radius:16px;
  background:linear-gradient(135deg,#FB923C,#F97316);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:300;box-shadow:0 10px 22px rgba(249,115,22,.45);z-index:6}

.phone-stage .phone-front{z-index:3}
.phone-stage .phone-back{position:absolute;z-index:1;left:54%;top:34px;transform:rotate(6deg) scale(.9);opacity:.96}
.phone-front{animation:floatA 6s ease-in-out infinite}
.phone-back{animation:floatB 6s ease-in-out infinite .6s}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes floatB{0%,100%{transform:rotate(6deg) translateY(0) scale(.9)}50%{transform:rotate(6deg) translateY(-12px) scale(.9)}}

.d-statusbar{display:flex;justify-content:space-between;align-items:center;font-size:9px;
  font-weight:700;color:var(--ink-2);padding:2px 4px 8px;letter-spacing:.3px}
.sb-icons{letter-spacing:1px;opacity:.6;font-size:7px}

/* dashboard mock */
.dash-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.dash-greet{font-size:9px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.dash-name{font-family:var(--font-head);font-size:18px;font-weight:800;letter-spacing:-.5px;margin-top:1px}
.dash-avatar{width:30px;height:30px;border-radius:11px;background:linear-gradient(135deg,#FB923C,#F97316);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;box-shadow:var(--shadow-sm)}
.dash-datebar{display:flex;align-items:center;justify-content:space-between;background:#fff;
  border:1px solid var(--line-2);border-radius:12px;padding:6px 10px;margin-bottom:12px}
.ddb-arrow{color:var(--orange);font-size:13px;font-weight:800}
.ddb-today{font-size:9.5px;font-weight:700;color:var(--ink)}
.dash-section-label{font-size:8px;font-weight:800;letter-spacing:.8px;color:var(--ink-3);margin:6px 2px 7px}

.task-card{position:relative;display:flex;align-items:center;gap:9px;background:#fff;
  border:1px solid var(--line-2);border-radius:15px;padding:9px 10px 9px 13px;margin-bottom:7px;
  box-shadow:0 2px 6px rgba(15,23,42,.03);overflow:hidden}
.tc-bar{position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px}
.tc-orange .tc-bar{background:#F97316}.tc-orange{background:#FFF6EF}
.tc-blue .tc-bar{background:#2563EB}.tc-blue{background:#F0F5FF}
.tc-violet .tc-bar{background:#7C3AED}.tc-violet{background:#F5F1FE}
.tc-ic{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:13px;background:color-mix(in srgb,var(--ic) 14%,#fff);flex-shrink:0}
.tc-body{flex:1;min-width:0}
.tc-title{font-size:10.5px;font-weight:700;color:var(--ink)}
.tc-meta{font-size:8px;color:var(--ink-3);margin-top:1px;font-weight:500}
.tc-progress{height:4px;background:#E9E9EE;border-radius:3px;margin:4px 0 3px;overflow:hidden}
.tcp-fill{height:100%;background:linear-gradient(90deg,#2563EB,#3B82F6);border-radius:3px}
.tc-check{width:18px;height:18px;border-radius:50%;border:2px solid #D4D4D8;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;font-weight:800}
.tc-check.done{background:#10B981;border-color:#10B981}

.habit-pills{display:flex;flex-wrap:wrap;gap:6px}
.hpill{padding:5px 9px;border-radius:100px;font-size:9px;font-weight:700;
  background:#fff;border:1px solid var(--line-2);color:var(--ink-2)}
.hpill.done{background:#E7F8F1;border-color:#A7F0D4;color:#059669}

/* habit detail mock (hero back + feature) */
.hd-top{display:flex;justify-content:space-between;align-items:center;margin:2px 2px 2px}
.hd-title{font-family:var(--font-head);font-size:15px;font-weight:800;letter-spacing:-.3px}
.hd-streak{background:#FFF1E6;border:1px solid #FFD4AD;color:#EA580C;border-radius:100px;
  padding:3px 9px;font-size:10px;font-weight:800}
.hd-sub{font-size:9px;color:var(--ink-3);font-weight:600;margin:0 2px 10px}
.hd-heat{background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:10px}
.hd-heat-months{display:flex;justify-content:space-between;font-size:7px;color:var(--ink-3);margin-bottom:5px;font-weight:600}
.hd-heat-grid{display:grid;grid-template-columns:repeat(16,1fr);gap:3px}
.heat-cell{aspect-ratio:1;border-radius:2.5px;background:#EDEDF0}
.heat-cell.l1{background:#C7F0DD}.heat-cell.l2{background:#86E2BB}.heat-cell.l3{background:#34D399}.heat-cell.l4{background:#10B981}
.hd-stats{display:flex;justify-content:space-around;margin:12px 0;background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:11px 6px}
.hd-stats.big{margin-top:13px}
.hd-stat{text-align:center}
.hd-stat-v{font-family:var(--font-head);font-size:18px;font-weight:800;color:#059669;letter-spacing:-.5px}
.hd-stat-l{font-size:7.5px;color:var(--ink-3);font-weight:600;margin-top:1px}
.hd-log{display:flex;align-items:center;gap:7px;background:#E7F8F1;border:1px solid #A7F0D4;border-radius:11px;padding:8px 10px}
.hd-log-dot{width:8px;height:8px;border-radius:50%;background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.hd-log-text{font-size:9px;color:#059669;font-weight:700}

/* floating chips around hero phones */
.float-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid var(--line-2);
  border-radius:15px;padding:10px 13px;box-shadow:var(--shadow-md);will-change:transform}
.fc-streak{top:8%;left:-2%;animation:chipFloat 5s ease-in-out infinite}
.fc-done{top:46%;right:-6%;animation:chipFloat 5.5s ease-in-out infinite .8s}
.fc-ai{bottom:8%;left:4%;animation:chipFloat 6s ease-in-out infinite .4s}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.chip-emoji{font-size:20px}
.chip-big{font-family:var(--font-head);font-size:14px;font-weight:800;letter-spacing:-.3px}
.chip-small{font-size:9px;color:var(--ink-3);font-weight:600}
.chip-small2{font-size:10.5px;font-weight:700;color:var(--ink)}
.chip-check{width:22px;height:22px;border-radius:50%;background:#10B981;color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:800}
.chip-ai{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#7C3AED,#A855F7);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px}

/* ═══════════════ REAL-SCREENSHOT PHONE FRAMES ═══════════════ */
.shot-phone{position:relative}
.shot-device{width:300px;border-radius:36px;background:#1b1b22;padding:3px;
  border:1px solid rgba(0,0,0,.18);box-shadow:var(--shadow-device);
  transition:transform .35s var(--ease);overflow:hidden;position:relative}
.shot-device img{width:100%;display:block;border-radius:33px}
/* hero stage uses the same float/positioning as before */
.phone-stage .shot-device{width:272px}
.phone-feature .shot-device{width:306px}
.pillar-ic ion-icon{font-size:25px;color:var(--p)}
.duo-card-label ion-icon{font-size:19px;vertical-align:-3px}

.duo-shot{display:flex;justify-content:center;padding:8px 0 4px}
.duo-shot .shot-device{width:264px}

/* ═══════════════ PILLARS ═══════════════ */
.pillars{padding:70px 0 30px;position:relative}
.pillars-lead{text-align:center;font-size:clamp(17px,2vw,22px);color:var(--ink-2);
  font-weight:500;margin-bottom:38px}
.pillars-lead strong{color:var(--ink);font-weight:700}
.pillars-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.pillar{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 26px;
  background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;min-width:120px}
.pillar:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--p) 40%,var(--line))}
.pillar-ic{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:24px;background:color-mix(in srgb,var(--p) 12%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--p) 22%,transparent)}
.pillar-name{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--ink)}
.pillar-plus{font-size:22px;color:var(--ink-3);font-weight:300}

/* ═══════════════ MANIFESTO ═══════════════ */
.manifesto{padding:90px 0 100px;text-align:center}
.manifesto-text{font-family:var(--font-head);font-weight:700;
  font-size:clamp(28px,4.4vw,56px);line-height:1.16;letter-spacing:-1.5px;color:var(--ink)}
.manifesto-text span{display:block}
.manifesto-text em{font-style:normal;color:var(--ink-3)}
.manifesto-accent{background:linear-gradient(110deg,#F97316,#0EA5E9);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
[data-anim="lines"] span{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-anim="lines"].in span{opacity:1;transform:none}
[data-anim="lines"].in span:nth-child(2){transition-delay:.12s}
[data-anim="lines"].in span:nth-child(3){transition-delay:.24s}

/* ═══════════════ FEATURE SECTIONS ═══════════════ */
.feature{padding:90px 0;position:relative;overflow:hidden}
.feature.alt{background:linear-gradient(180deg,var(--bg),var(--accent-soft) 50%,var(--bg))}
.feature::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 14%,transparent),transparent 65%);
  filter:blur(40px);top:-10%;right:-12%;z-index:0;pointer-events:none}
.feature.alt::before{left:-12%;right:auto}
.feature-inner{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;position:relative;z-index:1}
.feature-inner.reverse{direction:rtl}
.feature-inner.reverse>*{direction:ltr}

.feature-tag{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:100px;
  background:color-mix(in srgb,var(--t) 10%,#fff);border:1px solid color-mix(in srgb,var(--t) 25%,transparent);
  color:var(--t);font-size:12.5px;font-weight:700;margin-bottom:22px}
.ft-dot{width:7px;height:7px;border-radius:50%;background:var(--t);box-shadow:0 0 8px var(--t)}
.feature-h{font-family:var(--font-head);font-weight:800;font-size:clamp(30px,3.6vw,48px);
  line-height:1.07;letter-spacing:-1.5px;margin-bottom:20px;color:var(--ink)}
.feature-lead{font-size:17px;line-height:1.7;color:var(--ink-2);margin-bottom:34px;max-width:520px}
.feature-lead em{font-style:normal;color:var(--accent);font-weight:600}

.feature-points{display:flex;flex-direction:column;gap:18px}
.feature-points.compact{gap:14px;margin-top:8px}
.fp{display:flex;gap:14px;align-items:flex-start}
.fp-ic{width:42px;height:42px;min-width:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:18px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-sm)}
.fp-text{font-size:14px;color:var(--ink-2);line-height:1.55}
.fp-text b{display:block;color:var(--ink);font-size:14.5px;font-weight:700;margin-bottom:2px}

/* feature visual */
.feature-visual{display:flex;justify-content:center;position:relative}
.phone-feature{animation:floatA 7s ease-in-out infinite}
.phone-feature .device{width:300px}
.phone-feature .device-screen{height:600px}

/* reminder/habit detail screen */
.rd-head{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 12px}
.rd-back{font-size:18px;color:var(--ink-2);font-weight:700}
.rd-htitle{font-size:11px;font-weight:800;color:var(--ink)}
.rd-edit{font-size:10px;color:var(--orange);font-weight:700}
.rd-streak-badge{background:#FFF1E6;border:1px solid #FFD4AD;color:#EA580C;border-radius:100px;padding:3px 9px;font-size:10px;font-weight:800}
.rd-hero{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line-2);
  border-left:4px solid var(--c);border-radius:16px;padding:12px;margin-bottom:11px;box-shadow:var(--shadow-sm)}
.rd-hero-ic{width:42px;height:42px;border-radius:13px;background:color-mix(in srgb,var(--c) 14%,#fff);
  display:flex;align-items:center;justify-content:center;font-size:21px}
.rd-hero-title{font-family:var(--font-head);font-size:14px;font-weight:800;letter-spacing:-.3px}
.rd-badges{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap}
.rd-badge{font-size:8px;font-weight:700;padding:2px 8px;border-radius:100px;
  background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 25%,transparent)}
.rd-line{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--ink-2);font-weight:600;padding:3px 2px}
.rd-line-ic{font-size:11px}
.rd-block{background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:11px;margin:9px 0}
.rd-block-head{display:flex;justify-content:space-between;font-size:10px;font-weight:800;color:var(--ink);margin-bottom:7px}
.rd-block-count{color:var(--orange)}
.rd-progress{height:5px;background:#EDEDF0;border-radius:3px;overflow:hidden;margin-bottom:9px}
.rd-progress-fill{height:100%;background:linear-gradient(90deg,#F97316,#FB923C);border-radius:3px}
.rd-item{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--ink-2);padding:3px 0;font-weight:500}
.rd-item.done{color:var(--ink-3);text-decoration:line-through}
.rd-box{width:15px;height:15px;border-radius:5px;border:2px solid #D4D4D8;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;font-weight:800}
.rd-box.on{background:#10B981;border-color:#10B981}
.rd-attach{display:flex;gap:6px;flex-wrap:wrap}
.rd-file{font-size:8.5px;font-weight:600;padding:5px 9px;border-radius:9px;background:#F0F5FF;
  border:1px solid #D6E4FF;color:#2563EB}

/* habit calendar grid in feature */
.habit-cal{background:#fff;border:1px solid var(--line-2);border-radius:15px;padding:12px;margin-bottom:4px}
.habit-cal-head{display:flex;justify-content:space-between;font-size:10px;font-weight:800;margin-bottom:9px}
.hc-pct{color:#059669}
.habit-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.hcell{aspect-ratio:1;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:700;color:var(--ink-3);background:#F4F4F6}
.hcell.done{background:#10B981;color:#fff}
.hcell.miss{background:#FEE4E2;color:#EF4444}
.hcell.today{box-shadow:inset 0 0 0 2px #F97316}
.habit-insight{margin-top:12px;font-size:9.5px;font-weight:600;color:#7C3AED;background:#F1ECFD;
  border:1px solid #D9CBFA;border-radius:11px;padding:9px 11px;line-height:1.4}

/* AI screen */
.ai-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.ai-chip{font-size:13px;font-weight:500;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line-2);border-radius:100px;padding:8px 15px;box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease),border-color .25s,color .25s}
.ai-chip:hover{transform:translateY(-3px);border-color:#C4B0FB;color:var(--violet)}
.ai-head{display:flex;align-items:center;gap:9px;padding:2px 2px 11px;border-bottom:1px solid var(--line-2);margin-bottom:11px}
.ai-ava{width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,#7C3AED,#A855F7);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 4px 12px rgba(124,58,237,.35)}
.ai-head-name{font-family:var(--font-head);font-size:12px;font-weight:800}
.ai-head-sub{font-size:8.5px;color:var(--ink-3);font-weight:600}
.ai-thread{display:flex;flex-direction:column;gap:9px;flex:1}
.ai-msg{font-size:10px;line-height:1.5;padding:9px 11px;max-width:88%;border-radius:14px}
.ai-msg.user{align-self:flex-end;background:linear-gradient(135deg,#7C3AED,#8B5CF6);color:#fff;
  border-bottom-right-radius:4px;font-weight:600;box-shadow:0 6px 14px rgba(124,58,237,.28)}
.ai-msg.bot{align-self:flex-start;background:#fff;border:1px solid var(--line-2);color:var(--ink-2);
  border-bottom-left-radius:4px;display:flex;gap:7px;align-items:flex-start}
.ai-msg.bot b{color:var(--violet)}
.ai-msg-ic{color:var(--violet);font-size:12px;flex-shrink:0}
.ai-inputbar{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line-2);
  border-radius:100px;padding:6px 6px 6px 14px;margin-top:11px}
.ai-input-mock{flex:1;font-size:10px;color:var(--ink-3)}
.ai-send{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#A855F7);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px}

/* finance screen */
.fin-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:13px;padding:2px}
.fin-cycle{font-size:9px;color:var(--ink-3);font-weight:600;margin-bottom:3px}
.fin-bal{font-family:var(--font-head);font-size:26px;font-weight:800;letter-spacing:-1px;color:var(--ink)}
.fin-bal-sub{font-size:8.5px;color:var(--ink-3);font-weight:500;margin-top:1px}
.fin-lock{width:32px;height:32px;border-radius:11px;background:#F1ECFD;border:1px solid #D9CBFA;
  display:flex;align-items:center;justify-content:center;font-size:14px}
.fin-buckets{display:flex;gap:7px;margin-bottom:14px}
.fin-b{flex:1;background:#fff;border:1px solid var(--line-2);border-top:3px solid var(--c);
  border-radius:13px;padding:9px 8px;text-align:center;box-shadow:var(--shadow-sm)}
.fb-l{font-size:8px;color:var(--ink-3);font-weight:600;margin-bottom:2px}
.fb-v{font-family:var(--font-head);font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.fin-tx-label{font-size:8px;font-weight:800;letter-spacing:.8px;color:var(--ink-3);margin:2px 2px 8px}
.fin-tx{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line-2);
  border-radius:12px;padding:9px 11px;margin-bottom:6px}
.ftx-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ftx-body{flex:1;min-width:0}
.ftx-n{font-size:10px;font-weight:700;color:var(--ink)}
.ftx-t{font-size:8px;color:var(--ink-3);font-weight:500}
.ftx-a{font-size:10.5px;font-weight:800;color:#EF4444;letter-spacing:-.2px}
.ftx-a.pos{color:#10B981}

/* ═══════════════ DUO (cal + analytics) ═══════════════ */
.duo{padding:90px 0}
.section-head.center{text-align:center;max-width:640px;margin:0 auto 56px}
.center-tag{margin-left:auto;margin-right:auto}
.section-h{font-family:var(--font-head);font-weight:800;font-size:clamp(28px,3.6vw,46px);
  line-height:1.08;letter-spacing:-1.5px;margin-bottom:16px}
.section-sub{font-size:17px;color:var(--ink-2);line-height:1.6}
.duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.duo-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:28px;
  box-shadow:var(--shadow-md)}
.duo-card-label{display:inline-flex;font-family:var(--font-head);font-weight:700;font-size:14px;
  color:var(--c);margin-bottom:20px}
.duo-desc{font-size:14px;color:var(--ink-2);line-height:1.6;margin-top:20px}

/* mini calendar */
.mini-cal{background:var(--bg);border:1px solid var(--line-2);border-radius:18px;padding:16px}
.mini-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.mc-nav{color:var(--violet);font-weight:800;font-size:15px;cursor:pointer}
.mc-title{font-family:var(--font-head);font-weight:800;font-size:15px}
.mini-cal-days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:10px;
  font-weight:700;color:var(--ink-3);margin-bottom:8px}
.mini-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:14px}
.mcell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;
  color:var(--ink-2);border-radius:9px;position:relative;cursor:pointer;transition:background .2s}
.mcell:hover{background:#F1ECFD}
.mcell.today{background:var(--orange);color:#fff;font-weight:800;border-radius:50%}
.mcell .dot{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%}
.mcell .dots{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);display:flex;gap:2px}
.mini-cal-events{display:flex;flex-direction:column;gap:6px}
.mce{font-size:11px;font-weight:600;padding:8px 11px;border-radius:11px;
  background:color-mix(in srgb,var(--c) 9%,#fff);border:1px solid color-mix(in srgb,var(--c) 22%,transparent);
  color:color-mix(in srgb,var(--c) 75%,#000)}

/* analytics mini */
.analytics-mini{background:var(--bg);border:1px solid var(--line-2);border-radius:18px;padding:18px}
.am-row{display:flex;justify-content:space-around;margin-bottom:18px}
.am-stat{text-align:center}
.am-v{font-family:var(--font-head);font-size:28px;font-weight:800;letter-spacing:-1px;color:var(--ink)}
.am-l{font-size:10px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.am-bars{display:flex;align-items:flex-end;gap:7px;height:90px;margin-bottom:20px;padding:0 4px}
.am-bar{flex:1;height:0;background:linear-gradient(to top,#FED7AA,#FB923C);border-radius:5px 5px 0 0;
  transition:height 1s var(--ease-out);align-self:flex-end}
.am-bar.hot{background:linear-gradient(to top,#F97316,#0EA5E9)}
.am-bars.run .am-bar{height:var(--h)}
.am-tags{display:flex;flex-direction:column;gap:10px}
.am-tag{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;color:var(--ink-2)}
.am-tag span{width:88px;flex-shrink:0}
.am-tbar{flex:1;height:7px;background:#EDEDF0;border-radius:4px;overflow:hidden}
.am-tbar i{display:block;height:100%;width:0;background:var(--c);border-radius:4px;transition:width 1s var(--ease-out)}
.am-tbar.run i{width:var(--w)}

/* ═══════════════ BENTO ═══════════════ */
.bento-section{padding:90px 0 100px}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bento-item{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:28px;
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
  opacity:0;transform:translateY(40px)}
[data-anim="bento"].in .bento-item{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-anim="bento"].in .bento-item:nth-child(2){transition-delay:.08s}
[data-anim="bento"].in .bento-item:nth-child(3){transition-delay:.16s}
[data-anim="bento"].in .bento-item:nth-child(4){transition-delay:.24s}
[data-anim="bento"].in .bento-item:nth-child(5){transition-delay:.32s}
[data-anim="bento"].in .bento-item:nth-child(6){transition-delay:.40s}
.bento-item:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.b-sync{grid-column:span 1}
.bento-ic{width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  font-size:24px;background:var(--bg-warm);border:1px solid var(--line-2);margin-bottom:16px}
.bento-item h3{font-family:var(--font-head);font-size:18px;font-weight:700;margin-bottom:8px;letter-spacing:-.3px}
.bento-item p{font-size:13.5px;color:var(--ink-2);line-height:1.6}
.sync-anim{display:flex;align-items:center;gap:6px;margin-top:18px}
.sa-node{width:34px;height:34px;border-radius:11px;background:var(--bg-warm);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;font-size:16px}
.sa-cloud{width:40px;height:40px;border-radius:13px;background:#EAF7FE;border:1px solid #BEE6FB;
  display:flex;align-items:center;justify-content:center;font-size:18px}
.sa-link{flex:1;height:2px;background:linear-gradient(90deg,transparent,#0EA5E9,transparent);position:relative;overflow:hidden;border-radius:2px}
.sa-link::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff,transparent);animation:sa 1.6s linear infinite}
@keyframes sa{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.tag-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.t-chip{font-size:11px;font-weight:700;padding:4px 11px;border-radius:100px;
  background:color-mix(in srgb,var(--c) 11%,#fff);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 28%,transparent)}
.theme-dots{display:flex;gap:9px;margin-top:18px}
.th-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line-2);box-shadow:var(--shadow-sm)}

/* ═══════════════ CTA ═══════════════ */
.cta{position:relative;padding:120px 0;overflow:hidden;text-align:center;
  background:linear-gradient(180deg,var(--bg),#FFF4EA)}
.cta-aurora{position:absolute;inset:0;z-index:0;opacity:.7}
.cta-aurora .ab1{width:420px;height:420px;top:-10%;left:10%}
.cta-aurora .ab2{width:380px;height:380px;bottom:-15%;right:8%}
.cta-aurora .ab3{width:300px;height:300px;top:20%;right:30%}
.cta-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.cta-icon{width:84px;height:84px;border-radius:24px;margin-bottom:22px;box-shadow:var(--shadow-lg);
  animation:floatA 5s ease-in-out infinite}
.cta-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:100px;
  background:#fff;border:1px solid var(--line-2);font-size:13px;font-weight:700;color:var(--orange-d);
  box-shadow:var(--shadow-sm);margin-bottom:22px}
.cta-pill-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:ping 1.8s infinite}
.cta-h{font-family:var(--font-head);font-weight:800;font-size:clamp(32px,4.6vw,58px);
  line-height:1.06;letter-spacing:-2px;margin-bottom:18px}
.cta-sub{font-size:18px;color:var(--ink-2);max-width:520px;line-height:1.7;margin-bottom:38px}
.cta-buttons{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.store-badge{display:inline-flex;align-items:center;gap:13px;padding:14px 26px;border-radius:18px;
  background:var(--ink);color:#fff;box-shadow:0 16px 36px rgba(10,10,10,.24);
  transition:transform .3s var(--ease),box-shadow .3s}
.store-badge:hover{transform:translateY(-4px);box-shadow:0 26px 50px rgba(10,10,10,.32)}
.store-badge span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.store-badge small{font-size:11px;opacity:.75;font-weight:500}
.store-badge strong{font-family:var(--font-head);font-size:18px;font-weight:700;letter-spacing:-.3px}
.cta-contact{font-size:14px;color:var(--ink-3)}
.cta-contact a{color:var(--orange-d);font-weight:700}

/* ═══════════════ FOOTER ═══════════════ */
.footer{padding:60px 0 36px;border-top:1px solid var(--line);background:var(--surface)}
.footer-inner{display:flex;justify-content:space-between;gap:60px;flex-wrap:wrap;margin-bottom:44px}
.footer-tag{font-size:14px;color:var(--ink-3);margin-top:12px;font-weight:500}
.footer-cols{display:flex;gap:64px}
.footer-col{display:flex;flex-direction:column;gap:11px}
.footer-col h5{font-family:var(--font-head);font-size:13px;font-weight:700;margin-bottom:3px}
.footer-col a{font-size:14px;color:var(--ink-3);transition:color .2s}
.footer-col a:hover{color:var(--orange-d)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:1100px){
  .hero-inner{grid-template-columns:1fr;gap:10px;padding-top:32px}
  .hero-left{text-align:center;max-width:680px;margin:0 auto}
  .hero-eyebrow{margin-left:auto;margin-right:auto}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-ctas,.hero-trust{justify-content:center}
  .hero-right{margin-top:10px}
  .phone-stage{height:560px}
  .feature-inner,.feature-inner.reverse{grid-template-columns:1fr;gap:48px;direction:ltr}
  .feature-visual{order:-1}
  .feature-copy{text-align:center}
  .feature-tag{margin-left:auto;margin-right:auto}
  .feature-lead{margin-left:auto;margin-right:auto}
  .feature-points{text-align:left;max-width:540px;margin:0 auto}
  .ai-chips{justify-content:center}
  .duo-grid{grid-template-columns:1fr;gap:22px}
  .bento{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .container{padding:0 22px}
  .nav-links{display:none}
  .nav-inner{padding:0 22px}
  .hero-title{letter-spacing:-1.5px}
  .pillars-row{gap:6px}
  .pillar{min-width:84px;padding:14px 14px}
  .pillar-plus{font-size:16px}
  .pillar-ic{width:42px;height:42px;font-size:20px}
  .bento{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;gap:32px}
  .footer-bottom{flex-direction:column;text-align:center}
  .btn{flex:1;justify-content:center}
  .hero-ctas{width:100%}
}
@media(max-width:420px){
  .phone-stage{transform:scale(.86);height:500px}
  .float-chip{transform:scale(.9)}
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.2s!important;scroll-behavior:auto!important}
  [data-anim]{opacity:1!important;transform:none!important}
}