/* ============================================================
   Corban Global — Service page shared styles
   Inherits the homepage's visual language:
   dark forest / emerald ink, Inter Tight display, mono accents.
   ============================================================ */

:root{
  --bg: #07100b;
  --bg-2: #0b1710;
  --panel: #0f1e15;
  --panel-2: #132a1e;
  --line: #1c3628;
  --line-soft: rgba(79,183,122,0.10);
  --ink: #e8efe9;
  --ink-2: #aebbb1;
  --ink-3: #6e7c72;
  --green: #2f8f5a;
  --green-bright: #4fb77a;
  --green-deep: #1a5336;
  --amber: #d4a24c;
  --radius: 4px;
  --radius-lg: 8px;
  --container: 1280px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Inter',system-ui;-webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit; text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--green); color:#fff}

body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 1100px 500px at 50% -5%, rgba(47,143,90,0.14), transparent 60%),
    radial-gradient(ellipse 700px 400px at 85% 20%, rgba(79,183,122,0.05), transparent 70%);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.025 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.55;
}
h1,h2,h3,h4{font-family:'Inter Tight',sans-serif; font-weight:500; letter-spacing:-0.02em; margin:0}
.mono{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3)}
.kicker{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--green-bright); display:inline-flex; align-items:center; gap:8px}
.kicker::before{content:""; width:18px; height:1px; background:var(--green-bright)}
.container{max-width:var(--container); margin:0 auto; padding:0 32px; position:relative; z-index:1}

/* ———— NAV (simplified for sub-pages; mirrors homepage styling) ———— */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  backdrop-filter:blur(14px);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; gap:40px; padding:18px 32px; max-width:var(--container); margin:0 auto}
.logo{display:flex; align-items:center; gap:12px; font-family:'Inter Tight'; font-weight:600; font-size:17px; letter-spacing:-0.01em}
.logo img{height:40px; width:auto; display:block; filter: drop-shadow(0 0 14px rgba(79,183,122,0.35))}
.nav-links{display:flex; gap:4px; margin-left:12px}
.nav-links a{padding:8px 14px; font-size:14px; color:var(--ink-2); border-radius:6px; transition:all .2s}
.nav-links a:hover, .nav-links a.active{color:var(--ink); background:rgba(79,183,122,0.06)}
.nav-links a.active{color:var(--green-bright)}
.nav-cta{margin-left:auto; display:flex; gap:10px; align-items:center}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; font-size:14px; font-weight:500;
  border-radius:var(--radius); transition:all .2s; cursor:pointer; border:1px solid transparent;
}
.btn-primary{background:var(--green); color:#fff; border-color:var(--green)}
.btn-primary:hover{background:var(--green-bright); border-color:var(--green-bright); box-shadow:0 0 30px rgba(79,183,122,0.35)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green-bright); color:var(--green-bright)}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}

/* ———— BREADCRUMBS ———— */
.crumbs{padding:110px 0 0}
.crumbs-inner{display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-3); letter-spacing:0.1em; text-transform:uppercase}
.crumbs-inner a{color:var(--ink-3); transition:color .2s}
.crumbs-inner a:hover{color:var(--green-bright)}
.crumbs-inner .sep{opacity:.4}
.crumbs-inner .cur{color:var(--ink-2)}

/* ———— HERO ———— */
.svc-hero{padding:40px 0 80px; position:relative}
.svc-hero-grid{display:grid; grid-template-columns: 1.3fr 1fr; gap:80px; align-items:start}
.svc-hero .kicker{margin-bottom:24px}
.svc-hero h1{
  font-size:clamp(44px, 6vw, 72px); line-height:1.02; letter-spacing:-0.03em;
  margin-bottom:28px; text-wrap:balance;
}
.svc-hero h1 .em{
  background: linear-gradient(110deg, var(--green-bright) 0%, #7dd3a0 50%, var(--green-bright) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-style:italic; font-weight:500;
}
.svc-hero .lede{font-size:19px; line-height:1.55; color:var(--ink-2); max-width:560px; margin-bottom:36px}
.svc-hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:48px}

.hero-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.hero-chip{
  padding:6px 12px; border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--ink-2);
  font-family:'JetBrains Mono',monospace; letter-spacing:0.04em; background:rgba(15,30,21,0.5);
}

/* Hero stat card (right column) */
.hero-stat-card{
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px;
  position:relative; overflow:hidden;
}
.hero-stat-card::before{
  content:""; position:absolute; top:0; right:0; width:180px; height:180px;
  background: radial-gradient(circle, rgba(79,183,122,0.18), transparent 70%); pointer-events:none;
}
.hsc-head{
  display:flex; align-items:center; justify-content:space-between; padding-bottom:16px;
  border-bottom:1px solid var(--line); margin-bottom:20px; position:relative;
}
.hsc-head .t{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink)}
.hsc-head .live-dot{width:8px;height:8px;border-radius:50%;background:var(--green-bright); box-shadow:0 0 12px var(--green-bright); animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hsc-stat{display:flex; justify-content:space-between; align-items:baseline; padding:14px 0; border-bottom:1px dashed var(--line-soft); position:relative}
.hsc-stat:last-child{border-bottom:0}
.hsc-stat .l{font-size:13px; color:var(--ink-2)}
.hsc-stat .v{font-family:'Inter Tight'; font-size:22px; font-weight:500; letter-spacing:-0.02em; color:var(--ink)}
.hsc-stat .v .u{font-size:13px; color:var(--green-bright); margin-left:4px}

/* ———— SECTIONS ———— */
.section{padding:100px 0; border-top:1px solid var(--line)}
.section-head{display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-bottom:64px; align-items:end}
.section-head h2{font-size:clamp(32px, 3.5vw, 46px); line-height:1.1; text-wrap:balance}
.section-head .lead{color:var(--ink-2); font-size:16px; line-height:1.6; max-width:480px}

/* ———— CAPABILITIES GRID ———— */
.cap-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden}
.cap-card{background:var(--panel); padding:32px 28px; transition:background .25s; position:relative}
.cap-card:hover{background:var(--panel-2)}
.cap-card .n{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; color:var(--green-bright); margin-bottom:16px}
.cap-card .ic{width:42px;height:42px;border-radius:6px;background:rgba(47,143,90,0.12);display:flex;align-items:center;justify-content:center;color:var(--green-bright);border:1px solid var(--line);margin-bottom:18px; transition:all .25s}
.cap-card:hover .ic{background:rgba(47,143,90,0.22); border-color:var(--green-deep); transform:rotate(-4deg)}
.cap-card .ic svg{width:20px;height:20px}
.cap-card h3{font-size:19px; font-weight:500; letter-spacing:-0.015em; margin-bottom:10px}
.cap-card p{font-size:14px; color:var(--ink-2); line-height:1.55; margin:0 0 18px}
.cap-card ul{list-style:none; padding:0; margin:0}
.cap-card li{font-size:13px; color:var(--ink-2); padding:5px 0 5px 18px; position:relative; line-height:1.5}
.cap-card li::before{content:""; position:absolute; left:0; top:11px; width:8px; height:1px; background:var(--green-bright)}

/* ———— APPROACH / PHASES ———— */
.phases{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden}
.phase{padding:32px 28px; border-right:1px solid var(--line); background:var(--panel); position:relative; transition:background .25s}
.phase:last-child{border-right:0}
.phase:hover{background:var(--panel-2)}
.phase .p-n{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--green-bright); letter-spacing:0.15em; margin-bottom:14px; display:flex; align-items:center; gap:10px}
.phase .p-n::after{content:""; flex:1; height:1px; background:linear-gradient(to right, var(--green-deep), transparent)}
.phase h4{font-size:18px; letter-spacing:-0.015em; margin-bottom:8px}
.phase p{font-size:13px; color:var(--ink-2); line-height:1.55; margin:0 0 14px}
.phase .p-deliverable{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3)}
.phase .p-deliverable strong{color:var(--ink-2); font-weight:500}

/* ———— PROOF / STATS ROW ———— */
.proof-row{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--panel)}
.proof{padding:36px 32px; border-right:1px solid var(--line)}
.proof:last-child{border-right:0}
.proof .v{font-family:'Inter Tight'; font-size:44px; line-height:1; letter-spacing:-0.03em; color:var(--ink); margin-bottom:10px}
.proof .v .u{font-size:20px; color:var(--green-bright); margin-left:4px}
.proof .l{font-size:13px; color:var(--ink-2); line-height:1.4; margin-bottom:6px; font-weight:500}
.proof .d{font-size:12px; color:var(--ink-3); line-height:1.5}

/* ———— TECH STACK CHIPS ———— */
.stack-wrap{padding:36px; border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(180deg, var(--panel), var(--bg-2))}
.stack-groups{display:grid; grid-template-columns:repeat(4,1fr); gap:32px}
.stack-group h5{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--green-bright); letter-spacing:0.15em; text-transform:uppercase; margin:0 0 14px; font-weight:500}
.stack-group .chips{display:flex; flex-wrap:wrap; gap:6px}
.stack-group .chip{padding:6px 11px; border:1px solid var(--line); border-radius:var(--radius); font-size:12px; color:var(--ink-2); background:rgba(15,30,21,0.5); transition:all .2s}
.stack-group .chip:hover{border-color:var(--green-deep); color:var(--ink)}

/* ———— CASE MINI ———— */
.case-mini{
  display:grid; grid-template-columns:1fr 1.2fr; gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
}
.case-mini .cm-left{padding:40px; border-right:1px solid var(--line); background:rgba(15,30,21,0.5)}
.case-mini .cm-left .logo-block{display:flex; align-items:center; gap:10px; margin-bottom:28px; font-family:'Inter Tight'; font-weight:500; font-size:15px; color:var(--ink-2)}
.case-mini .cm-left .logo-block .mk{width:28px;height:28px;border:1px solid var(--green-deep); border-radius:4px; display:flex; align-items:center; justify-content:center; color:var(--green-bright)}
.case-mini .cm-left .q{font-family:'Inter Tight'; font-size:20px; line-height:1.3; letter-spacing:-0.015em; color:var(--ink); margin-bottom:24px; text-wrap:balance}
.case-mini .cm-left .author{font-size:13px; color:var(--ink-3); border-top:1px solid var(--line); padding-top:18px}
.case-mini .cm-left .author strong{color:var(--ink-2); font-weight:500; display:block}
.case-mini .cm-right{padding:40px}
.case-mini .cm-right .mono{margin-bottom:14px}
.case-mini .cm-right h3{font-size:22px; line-height:1.2; margin-bottom:14px; letter-spacing:-0.015em}
.case-mini .cm-right p{font-size:14px; color:var(--ink-2); line-height:1.6; margin:0 0 24px}
.case-mini .cm-right .results{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius)}
.case-mini .cm-right .r{padding:18px; border-right:1px solid var(--line)}
.case-mini .cm-right .r:last-child{border-right:0}
.case-mini .cm-right .r .v{font-family:'Inter Tight'; font-size:26px; letter-spacing:-0.02em; color:var(--ink)}
.case-mini .cm-right .r .v .u{font-size:13px; color:var(--green-bright)}
.case-mini .cm-right .r .l{font-size:11px; color:var(--ink-3); font-family:'JetBrains Mono',monospace; letter-spacing:0.08em; text-transform:uppercase; margin-top:4px}

/* ———— FAQ ———— */
.faq{display:grid; grid-template-columns: 1fr 2fr; gap:60px; align-items:start}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line); padding:22px 0; cursor:pointer}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:'Inter Tight'; font-size:17px; letter-spacing:-0.01em; color:var(--ink); transition:color .2s}
.faq-item:hover .faq-q{color:var(--green-bright)}
.faq-q .tog{color:var(--ink-3); font-family:'JetBrains Mono',monospace; font-size:18px; transition:transform .2s}
.faq-item.open .faq-q .tog{transform:rotate(45deg); color:var(--green-bright)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease, margin-top .25s}
.faq-item.open .faq-a{max-height:400px; margin-top:14px}
.faq-a p{font-size:14px; line-height:1.65; color:var(--ink-2); margin:0; padding-right:40px}

/* ———— RELATED SERVICES ———— */
.related{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.rel-card{
  padding:24px; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--panel); transition:all .25s; display:block;
}
.rel-card:hover{border-color:var(--green-deep); background:var(--panel-2); transform:translateY(-3px)}
.rel-card .r-ic{width:32px;height:32px;border-radius:4px;background:rgba(47,143,90,0.12);display:flex;align-items:center;justify-content:center;color:var(--green-bright);margin-bottom:14px;border:1px solid var(--line)}
.rel-card .r-ic svg{width:15px;height:15px}
.rel-card .r-t{font-family:'Inter Tight'; font-size:15px; font-weight:500; letter-spacing:-0.01em; margin-bottom:6px}
.rel-card .r-d{font-size:12px; color:var(--ink-3); line-height:1.5; margin-bottom:14px}
.rel-card .r-l{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--green-bright); letter-spacing:0.08em; text-transform:uppercase; display:flex; align-items:center; gap:6px}

/* ———— CTA ———— */
.svc-cta{padding:80px 0 100px}
.cta-card{
  background:linear-gradient(135deg, var(--panel-2) 0%, var(--panel) 40%, var(--bg-2) 100%);
  border:1px solid var(--green-deep); border-radius:var(--radius-lg); padding:56px; position:relative; overflow:hidden;
}
.cta-card::before{
  content:""; position:absolute; top:-50%; right:-20%; width:60%; height:200%;
  background: radial-gradient(ellipse, rgba(79,183,122,0.15), transparent 60%);
  pointer-events:none;
}
.cta-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:60px; align-items:center; position:relative}
.cta-grid h2{font-size:clamp(30px,3.2vw,42px); line-height:1.1; margin-bottom:16px; letter-spacing:-0.02em}
.cta-grid .em{color:var(--green-bright); font-style:italic; font-weight:500}
.cta-grid p{font-size:16px; color:var(--ink-2); line-height:1.6; margin:0 0 28px}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap}

/* ———— FOOTER ———— */
footer{border-top:1px solid var(--line); padding:60px 0 32px; color:var(--ink-2); font-size:13px; position:relative; z-index:1}
.foot-grid{display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap:48px; margin-bottom:48px}
.foot-brand .logo{margin-bottom:14px}
.foot-brand p{font-size:13px; color:var(--ink-3); max-width:280px; line-height:1.55; margin:0 0 18px}
.socials{display:flex; gap:8px}
.socials a{width:32px;height:32px;border:1px solid var(--line); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--ink-3); transition:all .2s}
.socials a:hover{border-color:var(--green-deep); color:var(--green-bright)}
.foot-grid .col h5{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--green-bright); letter-spacing:0.15em; text-transform:uppercase; margin:0 0 16px; font-weight:500}
.foot-grid .col a{display:block; padding:4px 0; color:var(--ink-2); font-size:13px; transition:color .2s}
.foot-grid .col a:hover{color:var(--green-bright)}
.foot-bar{display:flex; justify-content:space-between; padding-top:28px; border-top:1px solid var(--line); color:var(--ink-3); font-size:12px}
.foot-bar .r{display:flex; gap:20px}

/* ———— RESPONSIVE ———— */
@media (max-width:1100px){
  .svc-hero-grid{grid-template-columns:1fr; gap:48px}
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .phases{grid-template-columns:repeat(2,1fr)}
  .phase{border-right:0; border-bottom:1px solid var(--line)}
  .phase:nth-child(odd){border-right:1px solid var(--line)}
  .proof-row{grid-template-columns:repeat(2,1fr)}
  .proof{border-right:0; border-bottom:1px solid var(--line)}
  .proof:nth-child(odd){border-right:1px solid var(--line)}
  .stack-groups{grid-template-columns:repeat(2,1fr)}
  .case-mini{grid-template-columns:1fr}
  .case-mini .cm-left{border-right:0; border-bottom:1px solid var(--line)}
  .faq{grid-template-columns:1fr; gap:32px}
  .related{grid-template-columns:repeat(2,1fr)}
  .cta-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr; gap:32px}
  .section-head{grid-template-columns:1fr; gap:20px}
  .nav-links{display:none}
}
@media (max-width:640px){
  .container{padding:0 20px}
  .section{padding:70px 0}
  .cap-grid{grid-template-columns:1fr}
  .phases{grid-template-columns:1fr}
  .phase{border-right:0 !important}
  .proof-row{grid-template-columns:1fr}
  .proof{border-right:0 !important}
  .stack-groups{grid-template-columns:1fr}
  .related{grid-template-columns:1fr}
  .cta-card{padding:36px 28px}
  .foot-grid{grid-template-columns:1fr}
}

/* ———— REVEAL ———— */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .8s, transform .8s}
.reveal.in{opacity:1; transform:none}
.no-js .reveal, html.reveal-ready .reveal{opacity:1; transform:none}
.delay-1{transition-delay:.08s}
.delay-2{transition-delay:.16s}
.delay-3{transition-delay:.24s}