/* ============================================================
   UP-RUN — Design tokens
   ============================================================ */
:root{
  /* Colour */
  --bg:            #060a08;
  --bg-soft:       #0a100c;
  --surface:       #0e1712;
  --surface-2:     #12211a;
  --border:        #1d2e24;
  --border-soft:   #16241c;
  --green-deep:    #0f2a1c;
  --green-mid:     #1c6b46;
  --green-primary: #33c17c;
  --green-bright:  #7bf0ae;
  --amber:         #e8c27a;
  --text:          #edf3ee;
  --text-muted:    #9bb2a7;
  --text-faint:    #5f7669;

  /* Type */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Layout */
  --max: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 14px;
  --radius-lg: 22px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background:
    radial-gradient(1100px 560px at 82% -8%, rgba(51,193,124,0.14), transparent 60%),
    radial-gradient(900px 500px at -10% 12%, rgba(28,107,70,0.14), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; margin:0; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family:inherit; }

:focus-visible{
  outline: 2px solid var(--green-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-bright);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background: var(--green-primary);
  box-shadow: 0 0 0 4px rgba(51,193,124,0.16);
}

.section{ padding: clamp(64px, 9vw, 120px) 0; position:relative; }
.section-head{ max-width: 640px; margin-bottom: clamp(36px,5vw,56px); }
.section-head h2{ font-size: clamp(28px, 3.6vw, 42px); margin-top:14px; }
.section-head p{ margin-top:14px; color: var(--text-muted); font-size:17px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.divider{
  height:1px;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
  border:0;
  margin:0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background: linear-gradient(180deg, #3fd48c, var(--green-mid));
  color: #04170d;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 30px -12px rgba(51,193,124,0.55);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 16px 34px -12px rgba(51,193,124,0.7); }
.btn-ghost{
  background: rgba(255,255,255,0.02);
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover{ border-color: var(--green-mid); background: rgba(51,193,124,0.06); }
.btn-arrow{ transition: transform .18s ease; }
.btn:hover .btn-arrow{ transform: translateX(3px); }
.btn-block{ width:100%; }

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header{
  position: sticky; top:0; z-index: 60;
  background: rgba(6,10,8,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border-soft);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px var(--pad);
  max-width: var(--max); margin:0 auto;
}
.logo{
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  display:flex; align-items:center; gap:2px;
  color: var(--text);
}
.logo b{ color: var(--green-bright); font-weight:600; }
.logo .cursor{
  display:inline-block; width:8px; height:1.1em; margin-left:4px;
  background: var(--green-primary);
  animation: blink 1.1s steps(1) infinite;
  vertical-align: -2px;
}
@keyframes blink{ 50%{ opacity:0; } }

.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{
  font-size: 14.5px; color: var(--text-muted);
  position:relative; padding: 4px 0;
  transition: color .15s ease;
}
.nav-links a:hover{ color: var(--text); }
.nav-links a.active{ color: var(--text); }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: var(--green-primary); border-radius:2px;
}
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-toggle{
  display:none; background:none; border:1px solid var(--border); border-radius:10px;
  width:42px; height:38px; align-items:center; justify-content:center; color: var(--text);
}
.nav-toggle svg{ width:20px; height:20px; }

@media (max-width: 880px){
  .nav-links{
    position:fixed; inset: 68px 0 auto 0; z-index:50;
    flex-direction:column; align-items:flex-start; gap:0;
    background: #070c09; border-bottom: 1px solid var(--border);
    padding: 8px var(--pad) 18px;
    transform: translateY(-8px); opacity:0; pointer-events:none;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-links.open{ transform: translateY(0); opacity:1; pointer-events:auto; }
  .nav-links a{ width:100%; padding: 14px 0; border-bottom: 1px solid var(--border-soft); font-size:16px; }
  .nav-cta .btn-ghost{ display:none; }
  .nav-toggle{ display:inline-flex; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{ padding: clamp(56px,9vw,104px) 0 clamp(40px,6vw,80px); }
.hero .wrap{
  display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(30px,5vw,64px);
  align-items:center;
}
.hero-copy{ max-width: 620px; }
.hero h1{
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.12;
  margin-top: 18px;
  letter-spacing: -0.015em;
}
.hero h1 em{
  font-style:normal;
  background: linear-gradient(95deg, var(--green-bright), var(--green-primary) 60%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ margin-top:22px; font-size:18px; line-height:1.65; color: var(--text-muted); max-width: 520px; }
.hero-actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:36px; margin-top:44px; flex-wrap:wrap; }
.hero-meta div{ font-family: var(--font-mono); font-size:12.5px; color: var(--text-faint); }
.hero-meta strong{ display:block; font-family: var(--font-display); font-size:20px; color: var(--text); font-weight:600; margin-bottom:2px; }

@media (max-width: 980px){
  .hero .wrap{ grid-template-columns: 1fr; }
  .hero-copy{ max-width: 640px; }
  .hero-visual{ margin-top: 8px; }
}
@media (max-width: 480px){
  .hero-meta{ gap:24px; margin-top:36px; }
  .hero-sub{ font-size:16.5px; }
}

/* ---- terminal mock ---- */
.hero-visual{ width:100%; }
.terminal{
  background: linear-gradient(180deg, #0c1712, #081109);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02) inset;
  overflow:hidden;
  width: 100%;
}
.terminal-bar{
  display:flex; align-items:center; gap:8px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.015);
}
.terminal-bar span.dot{ width:11px; height:11px; border-radius:50%; background:#2a3a31; flex-shrink:0; }
.terminal-bar span.dot-red{ background:#e2685f; }
.terminal-bar span.dot-amber{ background:#e3b45c; }
.terminal-bar span.dot-green{ background:#3fbf7f; }
.terminal-title{
  margin-left:8px; font-family:var(--font-mono); font-size:12.5px; color: var(--text-faint);
  white-space: nowrap; overflow:hidden; text-overflow:ellipsis;
}
.terminal-body{
  padding: 34px 30px 40px;
  font-family: var(--font-mono);
  font-size: 16px;
  min-height: 340px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.terminal-line{ display:flex; gap:12px; margin-bottom:18px; opacity:0; animation: rise .5s ease forwards; line-height:1.5; }
.terminal-line .prompt{ color: var(--green-primary); flex-shrink:0; }
.terminal-line .out{ color: var(--text-faint); }
.terminal-line .ok{ color: var(--green-bright); }
.terminal-line .typed::after{
  content:""; display:inline-block; width:8px; height:17px; margin-left:2px;
  background: var(--green-bright); vertical-align:-4px;
  animation: blink 1s steps(1) infinite;
}
@keyframes rise{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:translateY(0);} }

@media (max-width: 980px){
  .terminal-body{ min-height: 280px; padding: 28px 24px 32px; font-size:15px; }
}
@media (max-width: 480px){
  .terminal-body{ min-height: 240px; padding: 24px 18px 28px; font-size:13.5px; }
  .terminal-line{ gap:9px; margin-bottom:14px; }
}

/* ============================================================
   Marquee strip
   ============================================================ */
.strip{
  border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
  overflow:hidden; background: var(--bg-soft);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.strip-track{
  display:flex; gap:56px; padding:20px 0; width:max-content;
  animation: scroll-left 26s linear infinite;
  font-family: var(--font-mono); font-size:13.5px; color: var(--text-faint);
  letter-spacing:.03em;
}
.strip-track span{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.strip-track span::before{ content:"◆"; color: var(--green-mid); font-size:9px; }
@keyframes scroll-left{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ============================================================
   Services
   ============================================================ */
.services-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.service-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px 28px;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.service-card:hover{ border-color: var(--green-mid); transform: translateY(-4px); background: var(--surface-2); }
.service-icon{
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(160deg, rgba(51,193,124,0.18), rgba(51,193,124,0.03));
  border: 1px solid var(--border);
  color: var(--green-bright);
  margin-bottom:20px;
}
.service-icon svg{ width:22px; height:22px; }
.service-card h3{ font-size:20px; margin-bottom:10px; }
.service-card p{ color: var(--text-muted); font-size:15px; }
.service-card .tag{
  display:inline-block; margin-top:16px; font-family:var(--font-mono);
  font-size:11.5px; color: var(--text-faint); border:1px solid var(--border-soft);
  padding:4px 10px; border-radius:999px;
}
.feature-list{ margin-top:18px; display:flex; flex-direction:column; gap:9px; }
.feature-list li{ display:flex; gap:10px; font-size:14.5px; color: var(--text-muted); align-items:flex-start; }
.feature-list li svg{ width:16px; height:16px; flex-shrink:0; margin-top:3px; color: var(--green-primary); }

@media (max-width: 900px){ .services-grid{ grid-template-columns:1fr; } }

/* ============================================================
   Portfolio — carousel of browser mockups
   ============================================================ */
.portfolio-carousel{ position:relative; }
.portfolio-viewport{ overflow:hidden; padding: 30px 0 10px; }
.portfolio-track{
  display:flex; align-items:stretch;
  transition: transform .55s cubic-bezier(.22,.85,.32,1);
  will-change: transform;
}
.portfolio-track .browser{
  flex: 0 0 auto;
  width: min(480px, 78vw);
  margin: 0 14px;
  transform: scale(0.8);
  opacity: .35;
  filter: grayscale(0.55) brightness(.72);
  transition: transform .55s cubic-bezier(.22,.85,.32,1), opacity .55s ease, filter .55s ease;
  cursor: pointer;
}
.portfolio-track .browser.is-adjacent{ transform: scale(0.9); opacity:.6; filter: grayscale(.3) brightness(.85); }
.portfolio-track .browser.is-active{ transform: scale(1); opacity:1; filter:none; cursor:default; }
.portfolio-track .browser:hover:not(.is-active){ filter: grayscale(.15) brightness(.92); }

.portfolio-arrows{ display:flex; justify-content:center; gap:14px; margin-top:8px; }
.portfolio-arrow{
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface); border:1px solid var(--border);
  color: var(--text); cursor:pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.portfolio-arrow:hover{ border-color: var(--green-mid); background: var(--surface-2); transform: translateY(-2px); }
.portfolio-arrow svg{ width:18px; height:18px; }

.portfolio-dots{ display:flex; justify-content:center; gap:9px; margin-top:22px; }
.portfolio-dots button{
  width:7px; height:7px; padding:0; border-radius:50%; border:none;
  background: var(--border); cursor:pointer; transition: background .2s ease, transform .2s ease, width .2s ease;
}
.portfolio-dots button.is-active{ background: var(--green-primary); width:22px; border-radius:4px; }

.browser{
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.browser-bar{
  display:flex; align-items:center; gap:10px; padding:11px 14px;
  background: #0b120e; border-bottom:1px solid var(--border-soft);
}
.browser-bar .dots{ display:flex; gap:6px; }
.browser-bar .dots span{ width:8px; height:8px; border-radius:50%; background:#243329; }
.browser-url{
  flex:1; font-family: var(--font-mono); font-size:11.5px; color: var(--text-faint);
  background: #0f1712; border:1px solid var(--border-soft); border-radius:999px;
  padding:5px 12px; text-align:center;
}
.browser-frame{ padding: 24px; min-height: 300px; }
.browser-frame .mini-nav{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.browser-frame .mini-logo{ font-family:var(--font-display); font-weight:600; font-size:14px; }
.browser-frame .mini-links{ display:flex; gap:16px; }
.browser-frame .mini-links span{ font-family: var(--font-mono); font-size:10.5px; opacity:.65; }
.mini-headline{
  font-family: var(--font-display); font-weight:600; font-size: 19px; line-height:1.28;
  max-width: 260px; margin-bottom:9px;
}
.mini-sub{ font-family: var(--font-body); font-size:12px; line-height:1.55; max-width:250px; opacity:.72; margin-bottom:20px; }
.mini-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding: 0 16px; border-radius:999px;
  font-family: var(--font-mono); font-size:10.5px; font-weight:500;
}
.mini-blocks{ display:flex; gap:9px; margin-top:22px; }
.mini-blocks div{
  flex:1; height:56px; border-radius:8px; opacity:.92;
  display:flex; align-items:flex-end; padding:8px 9px;
  font-family: var(--font-mono); font-size:9.5px; font-weight:500;
}

.portfolio-caption{ display:flex; justify-content:space-between; align-items:center; padding:16px 20px 20px; }
.portfolio-caption h4{ font-size:15.5px; }
.portfolio-caption span{ font-family: var(--font-mono); font-size:11px; color: var(--text-faint); }
.badge-concept{
  font-family: var(--font-mono); font-size:10.5px; letter-spacing:.06em;
  color: var(--green-bright); border:1px solid rgba(123,240,174,0.25);
  background: rgba(51,193,124,0.08); padding:3px 9px; border-radius:999px;
}

/* ---- product / e-commerce mockup format ---- */
.product-mock .mini-nav{ margin-bottom:18px; }
.product-media{
  position:relative; border-radius:12px; height:130px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.product-badge{
  position:absolute; top:10px; left:10px; font-family:var(--font-mono); font-size:9px;
  letter-spacing:.06em; padding:4px 9px; border-radius:999px; text-transform:uppercase;
}
.product-jar{ width:56px; height:64px; border-radius:10px 10px 16px 16px; position:relative; }
.product-jar::before{
  content:""; position:absolute; left:50%; top:-12px; transform:translateX(-50%);
  width:38px; height:16px; border-radius:6px;
}
.product-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.product-name{ font-family:var(--font-display); font-weight:600; font-size:15.5px; }
.product-price{ font-family:var(--font-mono); font-size:13px; }
.product-desc{ font-family:var(--font-body); font-size:11.5px; opacity:.65; margin-bottom:16px; }
.product-trust{ display:flex; gap:14px; margin-top:16px; }
.product-trust span{ font-family:var(--font-mono); font-size:9.5px; opacity:.6; }

/* ---- SaaS / analytics mockup format ---- */
.mini-chart{ display:flex; align-items:flex-end; gap:7px; height:74px; margin-top:24px; }
.mini-chart div{ flex:1; border-radius:5px 5px 2px 2px; }

/* palette themes for each mock site, scoped */
.theme-bloom .browser-frame{ background: linear-gradient(160deg,#2b2320,#1c1614); }
.theme-bloom .mini-headline{ color:#f6e9dc; }
.theme-bloom .mini-sub{ color:#e2cdb8; }
.theme-bloom .mini-btn{ background:#c98a5c; color:#2b1c10; }
.theme-bloom .mini-blocks div{ background: linear-gradient(160deg,#8a5a3c,#4c3626); color:#f6e9dc; }
.theme-bloom .mini-logo{ color:#f6e9dc; }
.theme-bloom .mini-links span{ color:#e2cdb8; }

.theme-forge .browser-frame{ background: linear-gradient(160deg,#1c1c1c,#0e0e0e); }
.theme-forge .mini-headline{ color:#f7f7f5; text-transform:uppercase; letter-spacing:-0.01em; }
.theme-forge .mini-sub{ color:#b7b7b3; }
.theme-forge .mini-btn{ background:#ff5a2e; color:#1a0a04; border-radius:6px; }
.theme-forge .mini-blocks div{ background: linear-gradient(160deg,#3a3a3a,#181818); border-radius:5px; color:#ff8a5c; }
.theme-forge .mini-logo{ color:#ff5a2e; }
.theme-forge .mini-links span{ color:#d8d8d5; }

.theme-table .browser-frame{ background: linear-gradient(160deg,#241a12,#140d09); }
.theme-table .mini-headline{ color:#f1e0bf; font-style:italic; }
.theme-table .mini-sub{ color:#d8bd94; }
.theme-table .mini-btn{ background:#8a2f2f; color:#f6e9dc; }
.theme-table .mini-blocks div{ background: linear-gradient(160deg,#6b4726,#301f10); color:#e9d3a8; }
.theme-table .mini-logo{ color:#e9d3a8; font-style:italic; }
.theme-table .mini-links span{ color:#c9a877; }

.theme-sable .browser-frame{ background: linear-gradient(160deg,#efefec,#e2e2dd); }
.theme-sable .mini-headline{ color:#1c1c1a; }
.theme-sable .mini-sub{ color:#57574f; }
.theme-sable .mini-btn{ background:#1c1c1a; color:#efefec; border-radius:0; }
.theme-sable .mini-blocks div{ background: #d8d8d0; border-radius:0; color:#33332e; }
.theme-sable .mini-logo{ color:#1c1c1a; }
.theme-sable .mini-links span{ color:#57574f; }

.theme-northfield .browser-frame{ background: linear-gradient(160deg,#20241b,#12150f); }
.theme-northfield .mini-logo{ color:#e9edd9; }
.theme-northfield .mini-links span{ color:#b7c0a3; }
.theme-northfield .product-media{ background: linear-gradient(160deg,#d8dcc6,#aab092); }
.theme-northfield .product-badge{ background:#2f3625; color:#dfe6c8; }
.theme-northfield .product-jar{ background: linear-gradient(160deg,#8a6a3a,#5c4322); }
.theme-northfield .product-jar::before{ background:#c9b98a; }
.theme-northfield .product-name{ color:#eef0e2; }
.theme-northfield .product-price{ color:#c7d3ac; }
.theme-northfield .product-desc{ color:#c7d0b6; }
.theme-northfield .mini-btn{ background:#9db06b; color:#1c2015; }
.theme-northfield .product-trust span{ color:#a9b492; }

.theme-loopline .browser-frame{ background: linear-gradient(160deg,#0c1020,#05070f); }
.theme-loopline .mini-logo{ color:#eef1ff; }
.theme-loopline .mini-links span{ color:#8891b8; }
.theme-loopline .mini-headline{ color:#f2f4ff; }
.theme-loopline .mini-sub{ color:#9aa3c9; }
.theme-loopline .mini-btn{ background:#5b7bff; color:#f4f6ff; }
.theme-loopline .mini-chart div:nth-child(1){ background:#2a355e; height:40%; }
.theme-loopline .mini-chart div:nth-child(2){ background:#3a4a8a; height:62%; }
.theme-loopline .mini-chart div:nth-child(3){ background:#4a5cb0; height:48%; }
.theme-loopline .mini-chart div:nth-child(4){ background:#5b7bff; height:88%; }
.theme-loopline .mini-chart div:nth-child(5){ background:#7d97ff; height:70%; }

@media (max-width: 780px){
  .portfolio-track .browser{ width: min(420px, 82vw); margin:0 8px; }
}
@media (max-width: 420px){
  .mini-headline{ font-size:17px; }
  .mini-blocks{ flex-wrap:wrap; }
  .mini-blocks div{ min-width: calc(50% - 5px); flex: 1 1 calc(50% - 5px); }
  .portfolio-arrow{ width:40px; height:40px; }
}


/* ============================================================
   Process
   ============================================================ */
.process-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.process-step{ padding: 26px 4px; border-top: 1px solid var(--border); }
.process-step .num{ font-family: var(--font-mono); color: var(--green-primary); font-size:13px; }
.process-step h3{ font-size:19px; margin: 14px 0 10px; }
.process-step p{ color: var(--text-muted); font-size:14.5px; }
@media (max-width: 900px){ .process-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .process-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   NFC spotlight
   ============================================================ */
.nfc{
  background: linear-gradient(155deg, var(--green-deep), #081109 65%);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: clamp(32px,5vw,64px);
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,60px);
  align-items:center;
  overflow:hidden;
  position:relative;
}
.nfc::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(420px 260px at 85% 20%, rgba(123,240,174,0.14), transparent 70%);
}
.nfc-copy h2{ font-size: clamp(26px,3.2vw,36px); }
.nfc-copy p{ margin-top:16px; color: var(--text-muted); font-size:16.5px; max-width: 440px; }
.nfc-list{ margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.nfc-list li{ display:flex; gap:10px; font-size:14.5px; color: var(--text); }
.nfc-list li svg{ width:17px; height:17px; color:var(--green-bright); margin-top:3px; flex-shrink:0; }

.nfc-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:260px; }
.nfc-card{
  width: 200px; height: 126px; border-radius:16px;
  background: linear-gradient(135deg,#123822,#0a2417);
  border:1px solid rgba(123,240,174,0.35);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
  position:relative; z-index:2;
  padding:18px;
  transform: rotate(-8deg);
  display:flex; flex-direction:column; justify-content:space-between;
}
.nfc-card .brand{ font-family:var(--font-mono); font-size:11px; color:var(--green-bright); letter-spacing:.05em; }
.nfc-card .stars{ font-family: var(--font-mono); color: var(--amber); font-size:14px; letter-spacing:3px; margin-top:6px; }
.nfc-card .chip{ width:28px; height:21px; border-radius:4px; background: linear-gradient(160deg,#c9a663,#8a6f3d); }
.nfc-card .wave{ position:absolute; right:16px; top:16px; width:20px; height:20px; border:2px solid rgba(123,240,174,0.5); border-radius:50%; }
.nfc-phone{
  position:relative; z-index:1; width:120px; height:220px; border-radius:26px;
  background: #0d1712; border:1px solid var(--border);
  margin-left:-40px; margin-top:60px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
}
.nfc-phone::before{
  content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:34px; height:5px; border-radius:3px; background:#1d2e24;
}
.ripple{
  position:absolute; z-index:0; width:60px; height:60px; border-radius:50%;
  border:1px solid rgba(123,240,174,0.4);
  left:50%; top:50%; transform: translate(-50%,-50%);
  animation: ripple 2.6s ease-out infinite;
}
.ripple.r2{ animation-delay:.9s; }
.ripple.r3{ animation-delay:1.8s; }
@keyframes ripple{ 0%{ width:40px; height:40px; opacity:.6; } 100%{ width:220px; height:220px; opacity:0; } }

@media (max-width: 860px){ .nfc{ grid-template-columns:1fr; } .nfc-visual{ margin-top:20px; } }

/* ============================================================
   Why / values
   ============================================================ */
.why-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.why-card{ padding: 26px 6px; border-top:1px solid var(--border); }
.why-card h3{ font-size:18px; margin-bottom:10px; }
.why-card p{ color: var(--text-muted); font-size:14.5px; }
@media (max-width: 860px){ .why-grid{ grid-template-columns:1fr; } }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{
  border-radius: 28px;
  background: linear-gradient(135deg, var(--green-deep), #081109);
  border: 1px solid var(--border);
  padding: clamp(40px,6vw,72px);
  text-align:center;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 300px at 50% -20%, rgba(123,240,174,0.18), transparent 70%);
}
.cta-band h2{ font-size: clamp(28px,4vw,44px); position:relative; }
.cta-band p{ color: var(--text-muted); margin-top:14px; font-size:17px; position:relative; }
.cta-band .hero-actions{ justify-content:center; position:relative; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ border-top:1px solid var(--border-soft); padding: 56px 0 30px; background: var(--bg-soft); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:32px; }
.footer-brand p{ color: var(--text-muted); font-size:14.5px; margin-top:14px; max-width:260px; }
.footer-col h5{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--text-faint); margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:14.5px; color: var(--text-muted); transition: color .15s ease; }
.footer-col a:hover{ color: var(--green-bright); }
.footer-bottom{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--border-soft);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-family: var(--font-mono); font-size:12px; color: var(--text-faint);
}
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   Inner page hero (services / contact)
   ============================================================ */
.page-hero{ padding: clamp(48px,8vw,84px) 0 clamp(30px,5vw,50px); }
.page-hero h1{ font-size: clamp(34px,5vw,54px); margin-top:16px; max-width:760px; }
.page-hero p{ margin-top:18px; color: var(--text-muted); font-size:17.5px; max-width:560px; }

/* ---------- Service detail rows ---------- */
.service-detail{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px,5vw,64px); align-items:center; padding: 50px 0; }
.service-detail:not(:last-child){ border-bottom:1px solid var(--border-soft); }
.service-detail.reverse{ grid-template-columns: 1.1fr 0.9fr; }
.service-detail.reverse .sd-visual{ order:2; }
.sd-index{ font-family:var(--font-mono); color: var(--green-primary); font-size:13px; }
.service-detail h2{ font-size: clamp(24px,3vw,32px); margin-top:12px; }
.service-detail > div p.lead{ margin-top:16px; color: var(--text-muted); font-size:16.5px; }
.sd-visual{
  border-radius: var(--radius-lg); border:1px solid var(--border);
  background: var(--surface); min-height: 260px; padding: 30px;
  display:flex; align-items:center; justify-content:center;
}
@media (max-width: 860px){
  .service-detail, .service-detail.reverse{ grid-template-columns:1fr; }
  .service-detail.reverse .sd-visual{ order:0; }
}

/* mini code block visual for websites service */
.code-visual{ width:100%; font-family:var(--font-mono); font-size:12.5px; color: var(--text-faint); }
.code-visual .l{ display:flex; gap:10px; margin-bottom:9px; }
.code-visual .ln{ width:16px; text-align:right; color: var(--text-faint); opacity:.5; }
.code-visual .k{ color: var(--green-bright); }
.code-visual .s{ color: var(--amber); }

/* ---------- Contact ---------- */
.contact-layout{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px,4vw,40px); align-items:start; }
.contact-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px;
}
.contact-card h3{ font-size:18px; margin-bottom:8px; }
.contact-card p{ color: var(--text-muted); font-size:14.5px; margin-bottom: 22px; line-height:1.6; }
.contact-item{ display:flex; gap:16px; align-items:flex-start; padding: 18px 0; border-top:1px solid var(--border-soft); }
.contact-item:first-of-type{ border-top:none; padding-top:2px; }
.contact-item svg{ width:19px; height:19px; color: var(--green-primary); margin-top:2px; flex-shrink:0; }
.contact-item h4{ font-size:14.5px; margin-bottom:5px; }
.contact-item a, .contact-item span{ font-size:14px; color: var(--text-muted); line-height:1.5; }
.contact-item a:hover{ color: var(--green-bright); }

.form-card{
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px; overflow:hidden;
}
.form-card .form-head{ padding: 24px 24px 18px; }
.form-card .form-head h3{ font-size:18px; }
.form-card .form-head p{ color: var(--text-muted); font-size:14.5px; margin-top:8px; line-height:1.6; }
.form-frame-wrap{
  background: #f6f7f5; border-radius: 14px; overflow:hidden; margin: 0 8px 8px;
  border: 1px solid rgba(0,0,0,0.06);
}
.form-frame-wrap iframe{ width:100%; border:0; display:block; }
.form-fallback{ padding: 18px 24px 22px; font-family: var(--font-mono); font-size:12.5px; color: var(--text-faint); line-height:1.7; }
.form-fallback a{ color: var(--green-bright); }

@media (max-width: 900px){ .contact-layout{ grid-template-columns:1fr; } }
@media (max-width: 560px){
  .contact-card{ padding:24px; }
  .form-card .form-head{ padding: 20px 18px 14px; }
  .form-frame-wrap{ margin: 0 6px 6px; }
  .form-fallback{ padding: 16px 18px 20px; }
}