/* =================================================================
   MEGYLLA — shared stylesheet for the marketing site
   One file, linked by every page. Edit once, applies everywhere.
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --black:#0D0D0C;
  --card:#161614;
  --control:#1C1C1A;
  --border:#2A2A27;
  --border-lit:#3A3A36;
  --cream:#F2F0EA;
  --muted:#9C998E;
  --faint:#5E5C54;
  --red:#BC2016;
  --red-bright:#D4271B;
  --yellow:#E8B33A;
  --green:#8FBF5A;
  --strava:#FC5200;

  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --maxw:1180px;
  --radius:14px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--cream);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.section{padding:92px 0;border-top:1px solid var(--border);}
.section--flush{border-top:none;}
.section--tight{padding:64px 0;}
.bg-card{background:var(--card);}

/* ---- type ---- */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.1;letter-spacing:-.02em;}
h1{font-size:clamp(38px,6vw,66px);font-weight:700;}
h2{font-size:clamp(28px,4vw,42px);}
h3{font-size:21px;letter-spacing:-.01em;}
.lead{color:var(--muted);font-size:clamp(16px,2vw,19px);max-width:60ch;}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:18px;}
.eyebrow b{color:var(--red);font-weight:500;}
.center{text-align:center;}
.center .lead{margin-left:auto;margin-right:auto;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.03em;padding:13px 22px;border-radius:9px;border:1px solid transparent;cursor:pointer;transition:transform .15s,background .15s,border-color .15s;}
.btn:hover{transform:translateY(-1px);}
.btn--primary{background:var(--red);color:#fff;}
.btn--primary:hover{background:var(--red-bright);}
.btn--ghost{background:transparent;color:var(--cream);border-color:var(--border-lit);}
.btn--ghost:hover{border-color:var(--muted);}
.arrow{transition:transform .15s;}
.btn:hover .arrow{transform:translateX(3px);}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(13,13,12,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;}
.logo{font-family:var(--display);font-weight:700;font-size:21px;display:flex;align-items:center;gap:9px;}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--red);}
.nav{display:flex;align-items:center;gap:28px;}
.nav a:not(.btn){font-family:var(--mono);font-size:13px;color:var(--muted);transition:color .15s;}
.nav a:not(.btn):hover,.nav a.active{color:var(--cream);}
.nav .btn{padding:10px 18px;}
@media(max-width:880px){.nav a:not(.btn){display:none;}}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--border);padding:46px 0;}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:22px;align-items:center;}
.flinks{display:flex;gap:22px;flex-wrap:wrap;}
.flinks a{font-family:var(--mono);font-size:12px;color:var(--muted);}
.flinks a:hover{color:var(--cream);}
.copy{font-family:var(--mono);font-size:12px;color:var(--faint);}

/* ---- generic grids ---- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split--wide-left{grid-template-columns:1.05fr .95fr;}
@media(max-width:880px){.grid-2,.grid-3,.split,.split--wide-left{grid-template-columns:1fr;gap:32px;}}

/* ---- cards ---- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;transition:border-color .18s,transform .18s;}
.card--hover:hover{border-color:var(--border-lit);transform:translateY(-2px);}
.card .tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);}
.card h3{margin:12px 0 8px;}
.card p{color:var(--muted);font-size:15px;}
.pip{width:8px;height:8px;border-radius:50%;display:inline-block;}
.pip--red{background:var(--red);}.pip--yellow{background:var(--yellow);}.pip--green{background:var(--green);}.pip--strava{background:var(--strava);}
.icon{width:30px;height:30px;color:var(--red);}

/* =================================================================
   MOCK-UI COMPONENTS — HTML/CSS representations of real app screens.
   These are styled stand-ins for screenshots, in the app aesthetic.
   ================================================================= */
.device{background:var(--card);border:1px solid var(--border-lit);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);}
.device-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--border);background:var(--black);}
.device-bar i{width:11px;height:11px;border-radius:50%;background:var(--border-lit);display:block;}
.device-bar .url{margin-left:12px;font-family:var(--mono);font-size:11px;color:var(--faint);}
.device-body{padding:18px;}

/* app chrome inside a mock */
.app-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:16px;}
.app-top .brand{font-family:var(--display);font-weight:700;font-size:15px;display:flex;gap:7px;align-items:center;}
.app-top .brand .dot{width:7px;height:7px;border-radius:50%;background:var(--red);}
.app-chips{display:flex;gap:8px;}
.app-chip{font-family:var(--mono);font-size:10px;color:var(--muted);padding:5px 9px;border:1px solid var(--border);border-radius:6px;}
.app-chip.on{color:var(--cream);border-color:var(--border-lit);background:var(--control);}

/* garage grid mock */
.garage{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.gbike{background:var(--control);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.gbike .thumb{aspect-ratio:16/10;background:linear-gradient(135deg,#23231f,#15150f);display:flex;align-items:flex-end;padding:10px;}
.gbike .thumb .frx{font-family:var(--mono);font-size:9px;color:var(--faint);}
.gbike .meta{padding:10px 12px;}
.gbike .name{font-weight:600;font-size:13px;}
.gbike .sub{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:3px;}
@media(max-width:560px){.garage{grid-template-columns:repeat(2,1fr);}}

/* feed post card mock */
.post{background:var(--control);border:1px solid var(--border);border-radius:12px;padding:16px;}
.post-id{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.post-id .av{width:34px;height:34px;border-radius:50%;background:var(--card);border:1px solid var(--border-lit);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--muted);}
.post-id .who{font-size:13px;font-weight:600;}
.post-id .ctx{font-family:var(--mono);font-size:10px;color:var(--faint);}
.post h4{font-family:var(--display);font-size:16px;margin-bottom:6px;}
.post .narr{font-size:13px;color:var(--muted);margin-bottom:12px;}
.post .stats{display:flex;gap:8px;margin-bottom:12px;}
.post .stat{flex:1;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 10px;}
.post .stat .k{font-family:var(--mono);font-size:9px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;}
.post .stat .v{font-size:14px;font-weight:600;margin-top:2px;}
.post .tasks{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.post .task{font-family:var(--mono);font-size:10px;color:var(--cream);background:var(--card);border:1px solid var(--border);border-radius:6px;padding:4px 8px;}
.post .photos{display:grid;grid-template-columns:2fr 1fr;gap:6px;margin-bottom:12px;height:120px;}
.post .photos .ph{border-radius:8px;background:linear-gradient(135deg,#26261f,#16160f);border:1px solid var(--border);}
.post .photos .col{display:grid;grid-template-rows:1fr 1fr;gap:6px;}
.post .foot{display:flex;gap:18px;padding-top:12px;border-top:1px solid var(--border);font-family:var(--mono);font-size:11px;color:var(--muted);}
.post .foot .w{color:var(--red);}

/* reminder rows mock */
.rem{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.rem:last-child{border-bottom:none;}
.rem .badge{font-family:var(--mono);font-size:9px;padding:4px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;}
.rem .badge.over{background:rgba(188,32,22,.15);color:var(--red);border:1px solid rgba(188,32,22,.4);}
.rem .badge.soon{background:rgba(232,179,58,.12);color:var(--yellow);border:1px solid rgba(232,179,58,.35);}
.rem .txt{flex:1;}
.rem .txt .t{font-size:13px;font-weight:500;}
.rem .txt .s{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:2px;}

/* FRX decoder */
.frx-box{background:var(--black);border:1px solid var(--border);border-radius:var(--radius);padding:28px;font-family:var(--mono);}
.frx-box .lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:16px;}
.frx-chars{display:flex;flex-wrap:wrap;gap:6px;}
.frx-char{width:34px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:6px;background:var(--control);font-size:17px;font-weight:500;}
.frx-char.mfr{border-color:var(--red);color:var(--red);}
.frx-char.sty{border-color:var(--yellow);color:var(--yellow);}
.frx-char.mat{border-color:var(--green);color:var(--green);}
.frx-char.hash{border-color:var(--muted);color:var(--muted);}
.frx-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px;font-size:11px;color:var(--muted);}
.frx-legend span{display:flex;align-items:center;gap:6px;}
.frx-legend i{width:9px;height:9px;border-radius:2px;}

/* feature list rows (Features page) */
.frow{padding:28px 0;border-top:1px solid var(--border);}
.frow:first-child{border-top:none;}
.frow .num{font-family:var(--mono);font-size:12px;color:var(--red);letter-spacing:.1em;margin-bottom:10px;}
.frow h3{margin-bottom:10px;}
.frow p{color:var(--muted);font-size:15px;max-width:62ch;}
.frow ul{margin:14px 0 0;padding-left:18px;color:var(--muted);font-size:14px;line-height:1.8;}

/* pricing */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px;margin:0 auto;}
@media(max-width:760px){.price-grid{grid-template-columns:1fr;}}
.plan{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;}
.plan.feat{border-color:var(--red);}
.plan .pname{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.plan .pprice{font-family:var(--display);font-size:40px;font-weight:700;margin:12px 0 4px;}
.plan .pper{font-family:var(--mono);font-size:12px;color:var(--faint);}
.plan ul{list-style:none;margin:22px 0;display:flex;flex-direction:column;gap:11px;}
.plan li{font-size:14px;color:var(--muted);display:flex;gap:10px;align-items:flex-start;}
.plan li::before{content:"→";color:var(--red);font-family:var(--mono);flex-shrink:0;}

/* testimonials */
.quote{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;}
.quote .qm{font-family:var(--display);font-size:38px;line-height:1;color:var(--red);margin-bottom:10px;}
.quote p{font-size:15px;margin-bottom:22px;}
.quote .who{margin-top:auto;display:flex;align-items:center;gap:12px;}
.quote .av{width:40px;height:40px;border-radius:50%;background:var(--control);border:1px solid var(--border);overflow:hidden;flex-shrink:0;}
.quote .nm{font-weight:600;font-size:14px;}
.quote .lo{font-family:var(--mono);font-size:11px;color:var(--faint);}

/* faq */
.faq{border-top:1px solid var(--border);padding:24px 0;}
.faq h4{font-size:17px;margin-bottom:8px;font-family:var(--display);font-weight:600;}
.faq p{color:var(--muted);font-size:15px;max-width:70ch;}

/* legal pages */
.legal h3{margin:36px 0 12px;}
.legal p{color:var(--muted);margin-bottom:12px;}
.legal ul{color:var(--muted);margin:0 0 18px;padding-left:20px;line-height:1.7;}
.legal .mailtag{font-family:var(--mono);font-size:15px;color:var(--cream);border-bottom:1px solid var(--red);padding-bottom:2px;display:inline-block;}