/* ============================================================================
   Piip Apps — apps.piip.com
   Aesthetic: bold & expressive — dark, glowing, megaphone "ping" motif.
   Dark by default; light is a clean secondary via [data-theme="light"].
   Typeface: Open Sans throughout (matches piipmobile.com).
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---- Tokens — DARK default ------------------------------------------------ */
:root{
  color-scheme:dark;
  --bg:#0b0e06; --bg-2:#10150a; --panel:#141a0c; --panel-2:#1a210e;
  --ink:#ecf1df; --ink-soft:#a6b08e; --ink-faint:#727c58;
  --green:#3f6505; --green-bright:#6f9a1f; --lime:#a6d943; --lime-2:#c6f06a;
  --red:#f0875a;
  --line:rgba(166,217,67,.16); --line-2:rgba(166,217,67,.08);
  --accent:var(--lime);
  --shadow:0 2px 4px rgba(0,0,0,.5), 0 30px 60px -28px rgba(0,0,0,.85);
  --shadow-lg:0 2px 6px rgba(0,0,0,.6), 0 52px 100px -36px rgba(0,0,0,.92);
  --glow:0 0 70px -12px rgba(166,217,67,.45);
  --maxw:1200px; --pad:clamp(20px,5vw,52px); --radius:18px;
  --f:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#fbfbf7; --bg-2:#f4f4ec; --panel:#ffffff; --panel-2:#f5f5ed;
  --ink:#1c2411; --ink-soft:#5d6650; --ink-faint:#9aa489;
  --green:#3f6505; --green-bright:#557f12; --lime:#3f6505; --lime-2:#557f12;
  --red:#c2410c;
  --line:rgba(31,45,12,.14); --line-2:rgba(31,45,12,.07);
  --accent:var(--green);
  --shadow:0 1px 2px rgba(31,45,12,.05), 0 18px 40px -20px rgba(31,45,12,.22);
  --shadow-lg:0 2px 4px rgba(31,45,12,.06), 0 40px 80px -32px rgba(31,45,12,.32);
  --glow:0 18px 50px -22px rgba(31,45,12,.3);
}

/* ---- Base ---------------------------------------------------------------- */
body{
  font-family:var(--f); font-size:clamp(15px,1.05vw,17px); line-height:1.6;
  color:var(--ink); background:var(--bg);
  background-image:
    radial-gradient(72% 55% at 82% -8%, color-mix(in srgb, var(--lime) 16%, transparent), transparent 60%),
    radial-gradient(55% 50% at -6% 26%, color-mix(in srgb, var(--green) 32%, transparent), transparent 62%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; position:relative;
}
/* film-grain overlay */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
::selection{background:var(--lime); color:#0b0e06}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:2}

/* ---- Type --------------------------------------------------------------- */
h1,h2,h3{font-weight:800; line-height:1.04; letter-spacing:-0.02em}
.mono{font-family:var(--f)}
.kicker{font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:.7em}
.kicker::before{content:""; width:28px; height:2px; background:var(--accent)}

/* ---- Top bar ------------------------------------------------------------- */
.topbar{position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line-2);
  background:color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter:blur(16px) saturate(1.3)}
.topbar .wrap{display:flex; align-items:center; gap:1.2rem; height:66px}
.brand{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; font-weight:800; font-size:1.05rem; letter-spacing:-.01em}
.brand img{width:27px; height:27px}
[data-theme="dark"] .brand img{filter:drop-shadow(0 0 9px rgba(166,217,67,.5))}
.brand b{color:var(--accent); font-weight:400} .brand .sep{color:var(--ink-faint); font-weight:400}
.topbar nav{margin-left:auto; display:flex; align-items:center; gap:clamp(.6rem,2vw,1.8rem)}
.topbar nav a{text-decoration:none; font-size:.88rem; font-weight:600; color:var(--ink-soft); transition:color .2s}
.topbar nav a:hover{color:var(--accent)}
.theme-toggle{width:36px; height:36px; border-radius:10px; border:1px solid var(--line); display:grid; place-items:center;
  color:var(--ink-soft); transition:border-color .2s, color .2s, transform .2s; flex:0 0 auto}
.theme-toggle:hover{color:var(--accent); border-color:var(--accent); transform:rotate(-12deg)}
.theme-toggle svg{width:17px; height:17px}
[data-theme="dark"] .theme-toggle .i-moon{display:none}
.theme-toggle .i-sun{display:none}
[data-theme="dark"] .theme-toggle .i-sun{display:block}

/* ---- Buttons ------------------------------------------------------------- */
.btn{display:inline-flex; align-items:center; gap:.55rem; font-size:.92rem; font-weight:700;
  text-decoration:none; padding:.85rem 1.4rem; border-radius:999px; border:1px solid transparent;
  transition:transform .18s, box-shadow .2s, background .2s, border-color .2s; white-space:nowrap}
.btn svg{width:18px; height:18px}
.btn-primary{background:var(--accent); color:#0b1004; box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%, transparent), 0 16px 40px -16px color-mix(in srgb,var(--accent) 70%, transparent)}
[data-theme="light"] .btn-primary{color:#f7fbef}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 0 0 1px var(--accent), 0 22px 50px -16px color-mix(in srgb,var(--accent) 80%, transparent)}
.btn-ghost{border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px)}
.btn-soon{border:1px dashed var(--line); color:var(--ink-faint); cursor:default; flex-direction:column; align-items:flex-start; gap:.05rem; padding:.6rem 1.15rem}
.btn-soon small{font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; opacity:.85}
.btn-soon b{font-weight:700; font-size:.92rem}
.btn-soon:hover{transform:none}

/* ---- Reveal -------------------------------------------------------------- */
.reveal{opacity:0; transform:translateY(20px)}
.revealed{opacity:1; transform:none; transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none} html{scroll-behavior:auto}}

/* ===========================================================================
   LANDING
   ========================================================================== */
.hero{position:relative; padding-block:clamp(3rem,7vw,5.5rem) clamp(1.2rem,3vw,2rem); overflow:hidden}
.hero .rings{position:absolute; top:-180px; right:-180px; width:660px; height:660px; z-index:0; pointer-events:none}
.hero .rings span{position:absolute; inset:0; margin:auto; border-radius:50%; border:1px solid var(--line)}
.hero .rings span:nth-child(1){width:250px; height:250px; box-shadow:var(--glow)}
.hero .rings span:nth-child(2){width:440px; height:440px; border-color:var(--line-2)}
.hero .rings span:nth-child(3){width:640px; height:640px; border-color:var(--line-2)}
.hero .rings .ping{width:250px; height:250px; border:2px solid var(--accent); box-shadow:none;
  animation:ping 4.2s cubic-bezier(.1,.6,.2,1) infinite}
@keyframes ping{0%{transform:scale(.55); opacity:.6} 70%,100%{transform:scale(2.1); opacity:0}}
@media (prefers-reduced-motion: reduce){.hero .rings .ping{animation:none; display:none}}

.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,5vw,4rem); align-items:center; position:relative; z-index:2}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr; gap:2.4rem}}
.hero-copy h1{font-size:clamp(2.7rem,6.6vw,5.2rem); font-weight:800; letter-spacing:-.035em; line-height:.98; margin-top:1.3rem}
[data-theme="dark"] .hero-copy h1{text-shadow:0 2px 40px rgba(0,0,0,.4)}
.hero-copy .pp{color:var(--accent)}
[data-theme="dark"] .hero-copy .pp{text-shadow:0 0 42px rgba(166,217,67,.45)}
.hero-copy .lede{font-size:clamp(1.05rem,1.6vw,1.35rem); font-weight:300; color:var(--ink-soft); max-width:46ch; margin-top:1.5rem; line-height:1.6}
.hero-copy .meta{margin-top:2.1rem; display:flex; flex-wrap:wrap; gap:1.2rem 2.2rem; font-size:.76rem; color:var(--ink-faint); letter-spacing:.04em}
.hero-copy .meta span{display:inline-flex; gap:.5rem; align-items:baseline}
.hero-copy .meta b{color:var(--ink); font-weight:800}

/* domain table (from B) */
.demo{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-lg)}
[data-theme="dark"] .demo{box-shadow:var(--shadow-lg), 0 0 60px -22px rgba(166,217,67,.4)}
.demo-bar{display:flex; align-items:center; gap:.55rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--line-2);
  font-size:.78rem; font-weight:600; color:var(--ink-faint)}
.demo-bar i{width:9px; height:9px; border-radius:50%; background:var(--line); display:inline-block}
.demo-bar i:nth-child(2){opacity:.6} .demo-bar i:nth-child(3){opacity:.35}
.demo-rows{display:flex; flex-direction:column}
.demo-row{display:flex; align-items:center; gap:.8rem; padding:.92rem 1.1rem; border-top:1px solid var(--line-2);
  font-size:clamp(.84rem,1.4vw,.96rem)}
.demo-row:first-child{border-top:0}
.demo-row .name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.demo-row .src{color:var(--ink-faint); font-size:.68rem; font-weight:700; letter-spacing:.08em}
.status{font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.24rem .62rem;
  border-radius:999px; display:inline-flex; align-items:center; gap:.4rem}
.status::before{content:""; width:7px; height:7px; border-radius:50%}
.status.ok{color:var(--lime-2); background:color-mix(in srgb, var(--lime) 18%, transparent)}
.status.ok::before{background:var(--lime)}
[data-theme="light"] .status.ok{color:#4f7d12}
.status.no{color:var(--red); background:color-mix(in srgb, var(--red) 16%, transparent)}
.status.no::before{background:var(--red)}
.status.q{color:var(--ink-faint); background:var(--line-2)} .status.q::before{background:var(--ink-faint)}

/* section heading */
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:1.4rem; margin-top:clamp(2.5rem,6vw,4rem)}
.sec-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
.sec-head .count{font-size:.78rem; font-weight:700; color:var(--ink-faint); letter-spacing:.1em}

/* apps catalog */
.catalog{margin-top:2.4rem; display:grid; gap:1.4rem}
.app-card{position:relative; display:grid; gap:clamp(1.5rem,4vw,2.6rem); grid-template-columns:minmax(0,1fr);
  align-items:center; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:22px;
  padding:clamp(1.6rem,4vw,2.4rem); overflow:hidden; box-shadow:var(--shadow);
  background:linear-gradient(135deg, var(--panel), color-mix(in srgb, var(--green) 14%, var(--panel)));
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s}
@media (min-width:760px){.app-card{grid-template-columns:132px 1fr auto}}
.app-card:hover{transform:translateY(-5px); border-color:var(--accent); box-shadow:var(--shadow-lg)}
[data-theme="dark"] .app-card:hover{box-shadow:var(--shadow-lg), 0 0 60px -20px rgba(166,217,67,.35)}
.app-card .num{position:absolute; top:1.1rem; right:1.4rem; font-size:.76rem; color:var(--ink-faint); font-weight:700; letter-spacing:.1em}
.app-icon{width:clamp(84px,16vw,132px); aspect-ratio:1; border-radius:26px; border:1px solid var(--line)}
[data-theme="dark"] .app-icon{box-shadow:0 0 40px -8px rgba(166,217,67,.3)}
.app-body h3{font-size:clamp(1.7rem,3.6vw,2.4rem); font-weight:800; letter-spacing:-.02em}
.app-body .tag{color:var(--ink-soft); font-weight:300; margin-top:.5rem; max-width:48ch}
.app-body .platforms{margin-top:1.1rem; display:flex; flex-wrap:wrap; gap:.5rem}
.pill{font-size:.72rem; font-weight:600; letter-spacing:.02em; padding:.3rem .72rem; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-soft)}
.pill.on{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%, transparent)}
.app-go{display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:800; color:var(--accent); white-space:nowrap}
.app-go svg{width:18px; height:18px; transition:transform .25s}
.app-card:hover .app-go svg{transform:translateX(5px)}

/* ===========================================================================
   PRODUCT (domain-check)
   ========================================================================== */
.crumb{padding-top:1.6rem; font-size:.82rem; color:var(--ink-faint); font-weight:600}
.crumb a{text-decoration:none; color:var(--ink-soft)} .crumb a:hover{color:var(--accent)}

.p-hero{display:grid; gap:clamp(2rem,6vw,4rem); align-items:center;
  padding-block:clamp(2rem,5vw,3.2rem) clamp(2.5rem,6vw,4.5rem)}
@media (min-width:900px){.p-hero{grid-template-columns:1.05fr .95fr}}
.p-hero .p-icon{width:clamp(76px,12vw,104px); border-radius:23px; border:1px solid var(--line)}
[data-theme="dark"] .p-hero .p-icon{box-shadow:0 0 50px -10px rgba(166,217,67,.4)}
.p-hero h1{font-size:clamp(2.5rem,6.2vw,4.4rem); font-weight:800; letter-spacing:-.03em; line-height:1.0; margin-top:1.3rem}
[data-theme="dark"] .p-hero h1{text-shadow:0 0 40px rgba(0,0,0,.4)}
.p-hero .sub{font-weight:600; color:var(--accent); font-size:.95rem; letter-spacing:.02em; margin-top:.6rem}
.p-hero .promo{font-size:clamp(1.05rem,1.6vw,1.25rem); font-weight:300; color:var(--ink-soft); max-width:50ch; margin-top:1.3rem; line-height:1.6}
.downloads{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.9rem; align-items:stretch}
.dl-note{font-size:.78rem; color:var(--ink-faint); margin-top:1rem}
.dl-note a{color:var(--accent)}

/* device showcase */
.shots{position:relative}
.shots-stack{position:relative; display:flex; justify-content:center; align-items:flex-end; gap:clamp(.6rem,1.5vw,1.1rem)}
.device{border-radius:30px; border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow-lg); overflow:hidden; flex:0 0 auto}
.device img{width:100%; height:auto}
.device.main{width:clamp(200px,50%,270px); z-index:2}
[data-theme="dark"] .device.main{box-shadow:var(--shadow-lg), 0 0 70px -20px rgba(166,217,67,.45)}
.device.side{width:clamp(150px,36%,210px); margin-bottom:1.6rem; opacity:.96}
.shots-glow{position:absolute; inset:-8% 8% auto; height:72%; z-index:0;
  background:radial-gradient(60% 60% at 50% 30%, color-mix(in srgb,var(--accent) 30%, transparent), transparent 70%);
  filter:blur(46px)}

/* features */
.features{padding-block:clamp(2rem,5vw,4rem)}
.feat-grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); margin-top:2.4rem}
.feat{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:1.5rem 1.4rem;
  transition:transform .25s, border-color .25s, box-shadow .25s}
.feat:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow)}
[data-theme="dark"] .feat:hover{box-shadow:0 0 50px -22px rgba(166,217,67,.4)}
.feat .ic{width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--accent) 14%, transparent); color:var(--accent); margin-bottom:1rem}
.feat .ic svg{width:20px; height:20px}
.feat h3{font-size:1.14rem; font-weight:700; letter-spacing:-.01em}
.feat p{color:var(--ink-soft); font-weight:300; font-size:.92rem; margin-top:.4rem}

/* privacy band */
.privacy-band{margin-top:clamp(2rem,5vw,3rem); border-radius:var(--radius); overflow:hidden; position:relative;
  padding:clamp(2rem,5vw,3.6rem); border:1px solid var(--line);
  background:linear-gradient(135deg, var(--panel-2), color-mix(in srgb,var(--green) 30%, var(--panel-2)))}
[data-theme="light"] .privacy-band{background:#16200c; border-color:transparent}
.privacy-band .kicker{color:var(--lime-2)} .privacy-band .kicker::before{background:var(--lime-2)}
.privacy-band h2{font-size:clamp(1.8rem,4vw,3rem); font-weight:800; letter-spacing:-.02em; margin-top:1rem; max-width:18ch; color:var(--ink)}
[data-theme="light"] .privacy-band h2{color:#fbfbf7}
.privacy-band p{color:var(--ink-soft); max-width:56ch; margin-top:1.2rem; font-weight:300}
[data-theme="light"] .privacy-band p{color:rgba(251,251,247,.78)}
.nope{margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:.6rem}
.nope span{font-size:.76rem; font-weight:600; letter-spacing:.04em; border:1px solid color-mix(in srgb,var(--lime) 45%, transparent);
  color:var(--lime-2); padding:.4rem .8rem; border-radius:999px}
.privacy-band .rings2{position:absolute; right:-60px; bottom:-120px; width:360px; height:360px; border-radius:50%;
  border:1px solid color-mix(in srgb,var(--lime) 24%, transparent);
  box-shadow:0 0 0 40px color-mix(in srgb,var(--lime) 7%, transparent), 0 0 0 90px color-mix(in srgb,var(--lime) 3.5%, transparent)}

/* how it works */
.tech{padding-block:clamp(2rem,5vw,3rem); display:grid; gap:1.5rem}
@media (min-width:760px){.tech{grid-template-columns:1fr 1fr; align-items:start}}
.tech .col h2{font-size:clamp(1.5rem,3vw,2rem)}
.tech .col p{color:var(--ink-soft); margin-top:1rem; max-width:50ch; font-weight:300}
.tech .steps{display:grid; gap:.8rem}
.tech .step{display:flex; gap:1rem; background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:1.1rem 1.2rem}
.tech .step b{color:var(--accent); font-size:.9rem; font-weight:800}
.tech .step p{margin-top:.15rem; font-size:.92rem; font-weight:300}
.tech .step span.t{font-weight:700}

.p-sec-head{border-top:1px solid var(--line); padding-top:1.4rem}
.p-sec-head h2{font-size:clamp(1.5rem,3vw,2.2rem); margin-top:.4rem}
.p-sec-head p{color:var(--ink-soft); margin-top:.6rem; max-width:52ch; font-weight:300}

/* ---- Footer -------------------------------------------------------------- */
.foot{border-top:1px solid var(--line); margin-top:clamp(4rem,10vw,8rem)}
.foot .wrap{display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; align-items:flex-start; padding-block:clamp(2.5rem,5vw,4rem)}
.foot .f-brand{display:flex; align-items:center; gap:.7rem; font-weight:800; font-size:1.2rem}
.foot .f-brand img{width:30px; height:30px}
.foot p{color:var(--ink-soft); font-size:.9rem; max-width:32ch; margin-top:.5rem; font-weight:300}
.foot nav{margin-left:auto; display:flex; gap:clamp(2rem,6vw,5rem)}
.foot nav div{display:flex; flex-direction:column; gap:.55rem}
.foot nav h4{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; margin-bottom:.25rem}
.foot nav a{text-decoration:none; color:var(--ink-soft); font-size:.92rem; transition:color .2s}
.foot nav a:hover{color:var(--accent)}
.foot nav a.eml{cursor:pointer}
.eml-decoy{display:none !important}
.eml-fb{color:var(--ink-soft); font-size:.92rem} .eml-fb i{font-style:normal; color:var(--ink-faint)}
.foot-base{border-top:1px solid var(--line-2)}
.foot-base .wrap{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; padding-block:1.3rem;
  font-size:.76rem; color:var(--ink-faint); letter-spacing:.03em}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:620px){
  .topbar nav{gap:1rem}
  .topbar nav a[href^="http"]{display:none}
  .demo-row .src{display:none}
  .foot nav{margin-left:0; width:100%; gap:2rem 2.5rem; flex-wrap:wrap}
  .downloads{gap:.6rem} .downloads .btn{flex:1 1 auto; justify-content:center}
}
@media (max-width:360px){ .topbar nav a{display:none} }