/* ============================================================
   FlyCryptoGuy — /services/  shared styles  (services v01)
   Hidden services section. Dark + FCG green.
   ============================================================ */

:root{
  --bg:        #0a0d12;
  --bg-2:      #0f141c;
  --panel:     #121925;
  --panel-2:   #161f2c;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);
  --text:      #e8eef5;
  --muted:     #8a97a8;
  --dim:       #5c6675;
  --green:     #4ade80;
  --green-br:  #86efac;
  --green-dk:  #1e7d4a;
  --glow:      rgba(74,222,128,.30);
}

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

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}

/* soft green radial glow up top */
body::before{
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(74,222,128,.10), transparent 70%),
    radial-gradient(700px 600px at 100% 0%, rgba(34,211,238,.05), transparent 70%);
  pointer-events:none; z-index:0;
}

.wrap{ position:relative; z-index:1; max-width:960px; margin:0 auto; padding:0 22px; }

/* ── top bar ── */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(10,13,18,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:22px 0; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.brand .mark{
  width:28px; height:28px; border-radius:7px;
  background:linear-gradient(135deg, var(--green), var(--green-dk));
  display:grid; place-items:center; color:#06140b; font-weight:800; font-size:16px;
  font-family:'Space Grotesk', sans-serif;
}
.brand b{ font-family:'Space Grotesk', sans-serif; font-weight:700; letter-spacing:.2px; }
.brand b span{ color:var(--green); }
.topbar .home{
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.04em;
  color:var(--dim); text-decoration:none; transition:color .2s;
}
.topbar .home:hover{ color:var(--green); }
.site-nav{ display:none; align-items:center; gap:4px; }
@media (min-width:768px){ .site-nav{ display:flex; } }
.site-nav a{ border-radius:8px; padding:8px 12px; font-size:14px; color:var(--dim); text-decoration:none; transition:color .2s; }
.site-nav a[aria-current="page"], .site-nav a:hover{ color:var(--text); }
.site-twitter-pill{
  display:inline-flex; align-items:center; justify-content:center; padding:8px 16px;
  border-radius:8px; background:var(--green); color:#06140b; font-size:13px; font-weight:700;
  text-decoration:none; transition:transform .15s ease; white-space:nowrap;
}
.site-twitter-pill:hover{ transform:scale(1.02); }
.site-mobile-nav{ display:flex; gap:6px; overflow-x:auto; border-top:1px solid var(--line); padding:10px 0; font-size:13px; -webkit-overflow-scrolling:touch; }
.site-mobile-nav a{ flex:0 0 auto; border-radius:8px; padding:6px 12px; color:var(--dim); text-decoration:none; }
.site-mobile-nav a[aria-current="page"]{ color:var(--text); background:var(--panel-2); }
@media (min-width:768px){ .site-mobile-nav{ display:none; } }

/* ── eyebrow + headings ── */
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--green);
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--green); opacity:.6; }

/* ── hand-arranged eyebrow (hub) — jaunty pile, no dash, MTV jitter ── */
.svc-eyebrow{
  --u: clamp(28.8px, 5.52vw, 52.8px);
  position:relative;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  width:100%;
  height:calc(var(--u) * 3.37);
  margin:0 0 14px;
}
.svc-eyebrow span{
  position:absolute; line-height:.85; white-space:nowrap;
  transform-origin:left bottom; transform:rotate(var(--r));
  animation: svc-jit 1.6s steps(1, end) infinite;
}
.svc-eyebrow .e-services{  --r:-10deg; font-size:calc(var(--u)*.92); left:calc(var(--u)*.12); top:calc(var(--u)*.42);  color:var(--green); animation-duration:1.6s; }
.svc-eyebrow .e-offerings{ --r:-3deg;  font-size:calc(var(--u)*.92); left:calc(var(--u)*.55); top:calc(var(--u)*1.34); color:var(--green); animation-duration:1.5s; }
.svc-eyebrow .e-to{        --r:-8deg;  font-size:calc((var(--u)*.36 + 5pt) * 1.15); left:calc(var(--u)*5.35 - 15px); top:calc(var(--u)*1.00 - 12px); color:var(--text);  animation-duration:1.75s; }
.svc-eyebrow .e-date{      --r:4deg;   font-size:calc((var(--u)*.6 + 7pt) * 1.2);  left:calc(var(--u)*6.0 - 12px); top:calc(var(--u)*1.42 - 15px);  color:var(--text);  animation-duration:1.65s; }

/* ── jaunty eyebrow for detail pages (inline, flexes to any title) ── */
.svc-eyebrow-line{ font-family:'Space Grotesk',sans-serif; font-weight:700; line-height:1; margin:0 0 18px; }
.svc-eyebrow-line span{
  display:inline-block; transform-origin:center; transform:rotate(var(--r));
  animation: svc-jit 1.6s steps(1, end) infinite;
}
.svc-eyebrow-line .e-num{ --r:-8deg; font-size:clamp(13px,2vw,18px); color:var(--text); margin-right:.4em; vertical-align:top; animation-duration:1.45s; }
.svc-eyebrow-line .e-w1{  --r:-4deg; font-size:clamp(26px,5.2vw,44px); color:var(--green); animation-duration:1.6s; }
.svc-eyebrow-line .e-w2{  --r:3deg;  font-size:clamp(26px,5.2vw,44px); color:var(--green); margin-left:.14em; animation-duration:1.72s; }

/* ── the jitter: snap between micro-positions, ~0.4s each (MTV in-place bounce) ── */
@keyframes svc-jit{
  0%   { transform: translate(0,0)    rotate(var(--r)); }
  25%  { transform: translate(1px,-2px) rotate(calc(var(--r) + 2deg)); }
  50%  { transform: translate(-2px,1px) rotate(calc(var(--r) - 2deg)); }
  75%  { transform: translate(1px,1px)  rotate(calc(var(--r) + 1deg)); }
}
@media (prefers-reduced-motion: reduce){
  .svc-eyebrow span, .svc-eyebrow-line span{ animation:none; }
}

h1{
  font-family:'Space Grotesk', sans-serif; font-weight:700;
  font-size:clamp(38px, 7vw, 68px); line-height:1.02; letter-spacing:-.02em;
  margin:18px 0 0;
}
h1 .g{ color:var(--green); }
.lead{ color:var(--muted); font-size:clamp(16px,2.4vw,19px); margin-top:18px; }

/* ── hero block ── */
.hero{ padding:64px 0 30px; }

/* ── splash image ── */
.splash{
  position:relative; width:100%; margin:36px 0 0;
  border-radius:18px; overflow:hidden;
  background:var(--panel); border:1px solid var(--line);
  aspect-ratio:16/6;
  display:flex; align-items:center; justify-content:center;
}
.splash img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.splash-ph{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
  z-index:1; pointer-events:none; text-align:center; line-height:2;
}
.splash.loaded .splash-ph{ display:none; }

/* detail page splash slightly taller */
.splash-detail{ aspect-ratio:16/7; }

/* ── service cards (hub) ── */
.cards{ display:grid; gap:16px; padding:28px 0 10px; }
.card{
  position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:26px 26px; text-decoration:none; color:var(--text);
  transition:border-color .25s, transform .25s, background .25s, box-shadow .25s;
}
.card:hover{
  border-color:rgba(74,222,128,.45); background:var(--panel-2);
  transform:translateY(-3px); box-shadow:0 16px 40px -20px var(--glow);
}
.card .num{
  font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:700;
  color:var(--green); border:1px solid rgba(74,222,128,.35); border-radius:8px;
  padding:8px 11px; align-self:start;
}
.card h3{ font-family:'Space Grotesk', sans-serif; font-size:24px; font-weight:600; letter-spacing:-.01em; }
.card p{ color:var(--muted); font-size:15px; margin-top:5px; }
.card .arrow{ color:var(--dim); font-size:24px; transition:transform .25s, color .25s; }
.card:hover .arrow{ color:var(--green); transform:translateX(4px); }

/* ── service detail page ── */
.section{ padding:14px 0; }
.section + .section{ border-top:1px solid var(--line); margin-top:14px; padding-top:34px; }
.section h2{
  font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--green); margin-bottom:18px;
}
.section .body{ color:var(--muted); font-size:17px; }
.section .body + .body{ margin-top:18px; }
.section .body strong{ color:var(--text); font-weight:600; }

.menu-list{ list-style:none; display:grid; gap:14px; margin-top:4px; }
.menu-list li{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px;
}
.menu-list .ti{ font-family:'Space Grotesk',sans-serif; color:var(--text); font-weight:600; font-size:16px; }
.menu-list .de{ color:var(--muted); font-size:14.5px; margin-top:3px; }
.menu-list .dot{ color:var(--green); font-size:18px; line-height:1.5; }

/* ── CTA ── */
.cta{
  margin-top:36px; background:linear-gradient(135deg, rgba(74,222,128,.10), rgba(34,211,238,.05));
  border:1px solid rgba(74,222,128,.30); border-radius:18px; padding:34px 30px; text-align:center;
}
.cta h3{ font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:700; }
.cta p{ color:var(--muted); margin:8px auto 22px; max-width:460px; }
.btn{
  display:inline-flex; align-items:center; gap:9px; font-family:'Space Grotesk',sans-serif;
  font-weight:600; font-size:15px; text-decoration:none; border-radius:11px; padding:14px 26px;
  transition:transform .2s, box-shadow .2s, background .2s, border-color .2s; cursor:pointer;
}
.btn-primary{ background:var(--green); color:#06140b; box-shadow:0 10px 30px -12px var(--glow); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 38px -14px var(--glow); }
.btn-ghost{ border:1px solid var(--line-2); color:var(--text); }
.btn-ghost:hover{ border-color:var(--green); color:var(--green); }
.cta .btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* proof chip (links to a live example) */
.proof{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--green-br);
  text-decoration:none; border:1px solid rgba(74,222,128,.25); border-radius:99px; padding:7px 14px;
  transition:background .2s, border-color .2s;
}
.proof:hover{ background:rgba(74,222,128,.08); border-color:rgba(74,222,128,.5); }
.proof .live{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }

/* ── other-services nav ── */
.more{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:40px; }
.more a{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px;
  text-decoration:none; transition:border-color .2s, background .2s;
}
.more a:hover{ border-color:rgba(74,222,128,.4); background:var(--panel-2); }
.more .k{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--dim); text-transform:uppercase; }
.more .v{ font-family:'Space Grotesk',sans-serif; color:var(--text); font-weight:600; margin-top:4px; }
.more a:hover .v{ color:var(--green); }

/* ── contact block (hub page) ── */
.contact-block{
  margin-top:60px; padding:44px 36px;
  background:var(--panel); border:1px solid var(--line); border-radius:20px;
}
.contact-block .eyebrow{ margin-bottom:0; }
.contact-h{
  font-family:'Space Grotesk', sans-serif; font-weight:700;
  font-size:clamp(32px,5vw,52px); letter-spacing:-.02em; margin:14px 0 0;
}
.contact-p{
  color:var(--muted); font-size:17px; max-width:560px; margin-top:12px; line-height:1.65;
}
.contact-ways{ margin-top:28px; display:flex; flex-direction:column; gap:12px; max-width:420px; }
.cway{
  display:flex; align-items:center; gap:16px;
  background:var(--panel-2); border:1px solid var(--line-2); border-radius:14px;
  padding:18px 22px; text-decoration:none; color:var(--text);
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.cway:hover{
  border-color:rgba(74,222,128,.45);
  transform:translateX(5px);
  box-shadow:0 8px 28px -14px var(--glow);
}
.cway-icon{
  width:40px; height:40px; border-radius:10px;
  background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.25);
  display:grid; place-items:center;
  font-size:18px; font-weight:700; color:var(--green);
  flex-shrink:0;
}
.cway-label{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px; }
.cway-sub{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--green); margin-top:3px; }
.cway-arr{ margin-left:auto; color:var(--dim); font-size:22px; transition:color .2s, transform .2s; }
.cway:hover .cway-arr{ color:var(--green); transform:translateX(4px); }
.contact-note{
  margin-top:18px; font-family:'JetBrains Mono',monospace;
  font-size:12px; color:var(--dim); letter-spacing:.06em;
}

/* ── footer ── */
.foot{ border-top:1px solid var(--line); margin-top:64px; padding:30px 0 50px; color:var(--dim); font-size:13px; }
.foot .row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.foot a{ color:var(--muted); text-decoration:none; transition:color .2s; }
.foot a:hover{ color:var(--green); }
.foot .backed{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.03em; }
.foot .backed b{ color:var(--muted); font-weight:600; }
.foot .ver{ font-family:'JetBrains Mono',monospace; font-size:11px; color:#2e3744; }

/* back link on detail pages */
.back{
  display:inline-flex; align-items:center; gap:8px; margin-top:30px;
  font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.04em;
  color:var(--dim); text-decoration:none; transition:color .2s;
}
.back:hover{ color:var(--green); }

@media (max-width:620px){
  .card{ grid-template-columns:auto 1fr; gap:14px 16px; padding:22px; }
  .card .arrow{ display:none; }
  .more{ grid-template-columns:1fr; }
  .hero{ padding:46px 0 22px; }
  .contact-block{ padding:30px 22px; }
  .splash{ aspect-ratio:16/8; }
  .splash-detail{ aspect-ratio:16/9; }
}