:root{--ivory:#F7F4EE;--ink:#14201F;--teal:#0F6E66;--teal-d:#0B524C;--mint:#E6F1EF;--teal-l:#8FCBC4;--line:#E3DED4;--muted:#4B5451;--muted2:#6C736F;--gold:#C8823A;--gold-t:#9A5A18;--gold-bg:#FBEFE0;--pad:clamp(20px,6.67vw,96px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Instrument Sans',system-ui,sans-serif;background:var(--ivory);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.5}
a{color:var(--teal);text-decoration:none}a:hover{color:var(--teal-d)}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-0.025em;margin:0}
button{font-family:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.page{position:relative;overflow:hidden;overflow:clip;max-width:1600px;margin:0 auto}
.mark{position:absolute;pointer-events:none}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}

/* motion */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes orbit{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.06)}}
@keyframes orbit2{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-40px)}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wordin{from{opacity:0;transform:translateY(.35em) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:translateY(14px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(15,110,102,.5)}70%{box-shadow:0 0 0 14px rgba(15,110,102,0)}}
@keyframes shine{from{transform:translateX(-120%) skewX(-18deg)}to{transform:translateX(220%) skewX(-18deg)}}
@keyframes scanline{0%,100%{top:14%}50%{top:80%}}
.wordin{display:inline-block;animation:wordin .55s cubic-bezier(.2,.7,.2,1) both}
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.orb1{animation:orbit 16s ease-in-out infinite}
.orb2{animation:orbit2 20s ease-in-out infinite}
.drift{animation:drift 6s ease-in-out infinite}
.reveal{opacity:0;transform:translateY(32px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-size:17px;font-weight:600;border:0;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,32,31,.18)}
.btn::after{content:"";position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));transform:translateX(-120%) skewX(-18deg);pointer-events:none}
.btn:hover::after{animation:shine .8s ease}
.btn-teal{background:var(--teal);color:#fff}.btn-teal:hover{color:#fff}
.btn-ink{background:var(--ink);color:var(--ivory)}.btn-ink:hover{color:var(--ivory)}
.btn-line{background:#fff;color:var(--ink);border:1px solid #C9C3B8}.btn-line:hover{color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ivory);border:1px solid #3A4A48}.btn-ghost:hover{color:var(--ivory)}

/* nav */
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-top:28px;padding-bottom:28px;position:relative}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);min-height:44px}
.brand:hover{color:var(--ink)}
.brand-mark{width:36px;height:36px;border-radius:10px;background:var(--teal);display:flex;align-items:center;justify-content:center;flex:none}
.brand-name{font-family:'Fraunces',Georgia,serif;font-size:24px;font-weight:600;letter-spacing:-.01em;line-height:1}
.brand-by{display:block;font-family:'Instrument Sans',system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin-top:4px}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 32px;font-size:15px;font-weight:500}
.nav-links a{color:var(--ink);min-height:44px;display:inline-flex;align-items:center}
.nav-links .btn{min-height:44px;padding:0 20px;font-size:15px;color:var(--ivory)}

/* hero */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:56px;align-items:center;padding-top:48px;padding-bottom:80px;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--teal)}
.hero h1{font-size:clamp(46px,6.2vw,88px);line-height:.98}
.hero h1 em{color:var(--teal);font-weight:400}
.hero p.lead{margin:0;font-size:clamp(19px,1.6vw,22px);line-height:1.45;color:var(--muted);max-width:500px}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:30px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px}

/* phone mock */
.stage{position:relative;display:flex;justify-content:center;padding:20px 0}
.stage-back{position:absolute;width:min(420px,88%);height:82%;top:9%;border-radius:40px;background:var(--ink)}
.phone{position:relative;width:min(100%,360px,calc((100vh - 190px) * .4621 + 24px));width:min(100%,360px,calc((100svh - 190px) * .4621 + 24px));border-radius:44px;background:#0E1716;padding:12px;box-sizing:border-box;box-shadow:0 40px 80px rgba(20,32,31,.28)}
.screen{position:relative;border-radius:34px;overflow:hidden;background:#F4F5F7;aspect-ratio:390/844}
.screen .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.screen iframe{position:absolute;top:0;left:0;width:390px;height:844px;border:0;display:block;background:#F4F5F7;transform-origin:0 0;transform:scale(var(--s,1))}
.scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,23,22,.15),rgba(14,23,22,.55));display:flex;align-items:center;justify-content:center}
.screen.on .poster,.screen.on .scrim{display:none}
.start{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 24px 0 9px;border:0;border-radius:999px;background:#fff;color:var(--ink);font-size:17px;font-weight:600;box-shadow:0 18px 40px rgba(14,23,22,.35);white-space:nowrap;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.start:hover{transform:translateY(-2px)}
.start-i{width:38px;height:38px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;animation:pulse 2.2s ease-out infinite}
.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#F4F5F7;color:var(--muted);font-size:14px}
.loading i{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--teal);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.try{text-align:center;font-size:14px;color:var(--muted);margin:16px auto 0;max-width:420px;line-height:1.5}

/* ticker */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden}
.ticker-track{display:flex;align-items:center;gap:40px;width:max-content;font-family:'Fraunces',Georgia,serif;font-size:26px;letter-spacing:-.02em;white-space:nowrap;animation:ticker 34s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track i{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.ticker-track em{color:var(--teal)}

/* sections */
.sec{padding-top:104px;padding-bottom:16px;display:flex;flex-direction:column;gap:40px;position:relative}
.sec h2{font-size:clamp(38px,4.5vw,64px);line-height:1}
.sec h2 span{color:var(--muted2)}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:16px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:14px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.step:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(20,32,31,.12)}
.step-n{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--teal)}
.step-i{width:56px;height:56px;border-radius:18px;background:var(--mint);display:flex;align-items:center;justify-content:center}
.step h3{font-size:26px;line-height:1.1}
.step p{margin:0;color:var(--muted);font-size:16px}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:12px}
.tile{position:relative;padding:22px 24px;border-radius:18px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;gap:18px;min-height:104px;transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .35s,color .35s,border-color .35s}
.tile svg{flex:none;transition:stroke .35s}
.tile b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:23px;letter-spacing:-.02em;line-height:1.15}
.tile small{display:block;font-size:14px;color:var(--teal);margin-top:4px;transition:color .35s}
.tile:hover{transform:translateY(-6px);background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.tile:hover svg{stroke:var(--teal-l)}
.tile:hover small{color:var(--teal-l)}

.rows{display:flex;flex-direction:column;margin-top:64px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:24px 48px;padding-top:48px;padding-bottom:48px;border-top:1px solid var(--line);transition:background-color .35s}
.row:last-child{border-bottom:1px solid var(--line)}
.row:hover{background:#fff}
.row-icon{flex:none;width:88px;height:88px;border-radius:26px;background:var(--mint);display:flex;align-items:center;justify-content:center;transition:transform .45s cubic-bezier(.2,.7,.2,1),background-color .35s}
.row-icon svg{transition:stroke .35s}
.row:hover .row-icon{transform:rotate(-8deg) scale(1.1);background:var(--teal)}
.row:hover .row-icon svg{stroke:#fff}
.row h3{flex:1;min-width:min(280px,100%);font-size:clamp(32px,3.75vw,54px);line-height:1.05}
.row h3 span{color:var(--teal)}

/* app-per-brand band */
.band{margin:96px clamp(12px,3.33vw,48px) 0;padding:clamp(36px,5vw,72px);border-radius:36px;background:var(--teal);color:#fff;position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:40px;align-items:center}
.band h2{font-size:clamp(36px,4.2vw,60px);line-height:1;color:#fff}
.band h2 span{color:#F2D3A0;font-style:italic;font-weight:400}
.band p{margin:0;font-size:19px;color:#E3F1EF;max-width:520px}
.skins{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
.skin{width:150px;border-radius:28px;padding:8px;background:rgba(0,0,0,.25)}
.skin-s{border-radius:22px;overflow:hidden;min-height:210px;display:flex;flex-direction:column}
.skin-h{padding:14px 12px;font-family:'Fraunces',Georgia,serif;font-size:17px}
.skin-p{margin:0 8px;border-radius:14px;flex:1;min-height:90px}
.skin-b{margin:8px;border-radius:12px;height:34px}

/* contact */
.contact{margin:16px clamp(12px,3.33vw,48px) 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:16px}
.card{padding:clamp(30px,4vw,56px);border-radius:36px;display:flex;flex-direction:column;justify-content:space-between;gap:44px;min-height:300px;position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(20,32,31,.16)}
.card h2{font-size:clamp(34px,3.4vw,48px);line-height:1.02}
.card-dark{background:var(--ink);color:var(--ivory)}
.card-dark h2{color:var(--ivory)}.card-dark h2 span{color:var(--teal-l)}
.card-light{background:#fff;border:1px solid var(--line)}
.card-light h2 span{color:var(--muted2)}
.card .btns{display:flex;flex-wrap:wrap;gap:12px;position:relative}

footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 28px;padding-top:48px;padding-bottom:44px;font-size:14px;color:var(--muted)}
footer nav{display:flex;flex-wrap:wrap;gap:4px 28px}
footer a{color:var(--muted);min-height:44px;display:inline-flex;align-items:center}

@media (max-width:600px){
  .sec{padding-top:72px}
  .row{padding-top:32px;padding-bottom:32px}
  .row-icon{width:64px;height:64px;border-radius:20px}
  .row-icon svg{width:28px;height:28px}
  .phone{padding:9px;border-radius:40px}
  .screen{border-radius:32px}
  .stage-back{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise,.wordin,.orb1,.orb2,.drift,.ticker-track,.start-i{animation:none}
  .reveal{opacity:1;transform:none}
}