/* ===========================================================
   SARATEK v2 — Light-first Enterprise AI & Automation
   Design system
   =========================================================== */

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

:root{
  /* color */
  --bg:            #F8FAFC;
  --white:         #FFFFFF;
  --ink:           #0F172A;
  --ink-dim:       #475569;
  --ink-faint:     #94A3B8;
  --accent:        #2563EB;
  --accent-dim:    rgba(37,99,235,0.08);
  --accent-line:   rgba(37,99,235,0.28);
  --cyan:          #06B6D4;
  --soft-blue:     #EFF6FF;
  --border:        #E2E8F0;
  --dark-bg:       #071426;
  --dark-bg-2:     #0B1F3A;
  --dark-border:   rgba(255,255,255,0.10);
  --dark-ink-dim:  #93A4C3;

  --f-body: 'Inter', sans-serif;
  --f-mono: 'IBM Plex Mono', monospace;

  --maxw: 1240px;
  --edge: clamp(20px, 5vw, 64px);
  --radius: 18px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.65;
  -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-weight:800; margin:0; letter-spacing:-0.02em; line-height:1.1; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--edge); }
section{ padding:120px 0; }
@media (max-width:900px){ section{ padding:80px 0; } }

/* ===========================================================
   NAV
   =========================================================== */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(248,250,252,0.7);
  backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.nav.is-scrolled{
  background:rgba(255,255,255,0.92);
  border-bottom-color:var(--border);
  box-shadow:0 8px 24px -16px rgba(15,23,42,0.12);
}
.nav-inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--edge); height:78px; display:flex; align-items:center; justify-content:space-between; }
.logo img{ height:22px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{ padding:10px 16px; font-size:14.5px; font-weight:500; color:var(--ink-dim); border-radius:8px; transition:color .2s ease, background .2s ease; }
.nav-links a:hover{ color:var(--ink); background:rgba(15,23,42,0.04); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; width:38px; height:38px; border-radius:9px; border:1px solid var(--border); background:var(--white); align-items:center; justify-content:center; }
.nav-toggle svg{ width:18px; height:18px; stroke:var(--ink); }

.nav.menu-open{ backdrop-filter:none; -webkit-backdrop-filter:none; }

@media (max-width:980px){
  .nav-links{
    position:fixed; top:78px; left:0; right:0; bottom:0; z-index:99;
    background:rgba(255,255,255,0.98); backdrop-filter:blur(10px);
    flex-direction:column; align-items:stretch; padding:18px var(--edge);
    transform:translateY(-10px); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  }
  .nav-links.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-links a{ padding:16px 4px; font-size:17px; border-bottom:1px solid var(--border); border-radius:0; }
  .nav-cta .btn-ghost{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ===========================================================
   BUTTONS
   =========================================================== */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:10px; font-size:14.5px; font-weight:600; border:1px solid transparent; white-space:nowrap; transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.btn:active{ transform:scale(0.98); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 10px 24px -10px rgba(37,99,235,0.55); }
.btn-primary:hover{ background:#1d4fd1; box-shadow:0 14px 28px -10px rgba(37,99,235,0.65); }
.btn-ghost{ border-color:var(--border); color:var(--ink); background:var(--white); }
.btn-ghost:hover{ border-color:var(--accent-line); background:var(--soft-blue); }
.btn-dark{ background:#fff; color:var(--dark-bg); }
.btn-dark:hover{ background:var(--soft-blue); }
.btn svg{ width:15px; height:15px; }

/* ===========================================================
   TYPE HELPERS
   =========================================================== */
.eyebrow{ font-family:var(--f-mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:9px; margin-bottom:20px; font-weight:500; }
.eyebrow::before{ content:''; width:16px; height:1px; background:var(--accent); }
.eyebrow.on-dark{ color:var(--cyan); }
.eyebrow.on-dark::before{ background:var(--cyan); }
h2.section-title{ font-size:clamp(32px,3.6vw,46px); max-width:760px; }
.section-title em{ font-style:normal; color:var(--accent); }
.on-dark .section-title em{ color:var(--cyan); }
.section-sub{ color:var(--ink-dim); font-size:17px; max-width:600px; margin-top:18px; line-height:1.7; }
.on-dark .section-sub{ color:var(--dark-ink-dim); }
.section-head{ margin-bottom:56px; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ===========================================================
   HERO
   =========================================================== */
.hero{ padding:84px 0 60px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center; }
.hero h1{ font-size:clamp(38px,5.4vw,68px); letter-spacing:-0.03em; }
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero-sub{ margin-top:24px; font-size:18px; color:var(--ink-dim); max-width:520px; }
.hero-actions{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; }

/* hero workflow visual */
.hero-visual{ position:relative; }
.flow-panel{ background:var(--white); border:1px solid var(--border); border-radius:22px; padding:8px; box-shadow:0 40px 90px -40px rgba(15,23,42,0.25); }
.flow-panel svg{ width:100%; height:auto; display:block; }
.flow-node-label{ font-family:var(--f-mono); font-size:10.5px; fill:var(--ink-dim); text-transform:uppercase; letter-spacing:0.06em; }
.flow-node-title{ font-family:Inter, sans-serif; font-size:13px; font-weight:700; fill:var(--ink); }
.flow-sub-label{ font-family:var(--f-mono); font-size:9.5px; fill:var(--ink-faint); }

/* ===========================================================
   VALUE STRIP
   =========================================================== */
.value-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:20px; overflow:hidden; margin-top:56px; }
.value-cell{ background:var(--white); padding:38px 30px; }
.value-cell svg{ width:24px; height:24px; stroke:var(--accent); margin-bottom:22px; }
.value-cell b{ display:block; font-size:16.5px; margin-bottom:10px; }
.value-cell span{ font-size:14px; color:var(--ink-dim); line-height:1.65; }
@media (max-width:900px){ .value-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .value-grid{ grid-template-columns:1fr; } }

/* ===========================================================
   SOLUTIONS CARDS
   =========================================================== */
.solutions-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:56px; }
.sol-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:34px 28px; display:flex; flex-direction:column; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.sol-card:hover{ transform:translateY(-4px); border-color:var(--accent-line); box-shadow:0 24px 50px -30px rgba(37,99,235,0.35); }
.sol-card .sc-icon{ width:44px; height:44px; border-radius:12px; background:var(--soft-blue); display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.sol-card .sc-icon svg{ width:21px; height:21px; stroke:var(--accent); }
.sol-card h3{ font-size:18.5px; margin-bottom:12px; }
.sol-card p{ font-size:14.5px; color:var(--ink-dim); line-height:1.7; flex:1; }
.sol-card .sc-link{ margin-top:22px; font-size:14px; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:6px; }
.sol-card .sc-link svg{ width:14px; height:14px; transition:transform .2s ease; }
.sol-card:hover .sc-link svg{ transform:translateX(3px); }
@media (max-width:980px){ .solutions-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .solutions-grid{ grid-template-columns:1fr; } }

/* ===========================================================
   PROCESS TIMELINE
   =========================================================== */
.timeline{ margin-top:64px; position:relative; }
.timeline-track{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
.timeline-track::before{ content:''; position:absolute; top:19px; left:0; right:0; height:1px; background:var(--border); }
.timeline-step{ position:relative; padding-right:20px; }
.timeline-dot{ width:38px; height:38px; border-radius:50%; background:var(--white); border:2px solid var(--accent); color:var(--accent); font-family:var(--f-mono); font-size:12px; display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:22px; position:relative; z-index:1; }
.timeline-step h4{ font-size:15.5px; margin-bottom:8px; }
.timeline-step p{ font-size:13.5px; color:var(--ink-dim); line-height:1.6; }
@media (max-width:900px){
  .timeline-track{ grid-template-columns:1fr; gap:32px; }
  .timeline-track::before{ top:0; bottom:0; left:19px; right:auto; width:1px; height:auto; }
  .timeline-step{ padding-right:0; padding-left:56px; }
  .timeline-dot{ position:absolute; left:0; top:0; margin-bottom:0; }
}

/* ===========================================================
   USE CASE TABS
   =========================================================== */
.uc-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:52px; border-bottom:1px solid var(--border); padding-bottom:0; }
.uc-tab{ padding:12px 18px; font-size:14px; font-weight:600; color:var(--ink-dim); border-radius:10px 10px 0 0; border:1px solid transparent; border-bottom:none; transition:color .2s ease, background .2s ease; position:relative; top:1px; }
.uc-tab:hover{ color:var(--ink); }
.uc-tab.is-active{ color:var(--accent); background:var(--white); border-color:var(--border); border-bottom:1px solid var(--white); }
.uc-panel{ display:none; padding-top:44px; }
.uc-panel.is-active{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:center; }
.uc-panel h3{ font-size:24px; margin-bottom:14px; }
.uc-panel p{ color:var(--ink-dim); font-size:15.5px; line-height:1.7; }
.uc-flow{ background:var(--white); border:1px solid var(--border); border-radius:18px; padding:28px; display:flex; flex-direction:column; gap:0; }
.uc-flow-step{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px; }
.uc-flow-step .ufs-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; }
.uc-flow-step span{ font-family:var(--f-mono); font-size:12.5px; letter-spacing:0.04em; color:var(--ink); }
.uc-flow-connector{ width:1px; height:16px; background:var(--border); margin-left:17px; }
@media (max-width:860px){ .uc-panel.is-active{ grid-template-columns:1fr; } }

/* ===========================================================
   SIGNATURE DARK SECTION
   =========================================================== */
.dark-section{ background:linear-gradient(180deg, var(--dark-bg), var(--dark-bg-2)); color:#fff; position:relative; overflow:hidden; }
.dark-section .section-sub{ color:var(--dark-ink-dim); }
.dark-net{ position:absolute; inset:0; opacity:0.5; pointer-events:none; }

.arch-diagram{ margin-top:64px; display:flex; flex-direction:column; align-items:center; gap:0; max-width:420px; margin-left:auto; margin-right:auto; }
.arch-node{ width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--dark-border); border-radius:14px; padding:18px 22px; text-align:center; }
.arch-node b{ display:block; font-size:14.5px; margin-bottom:4px; }
.arch-node span{ font-size:12px; color:var(--dark-ink-dim); }
.arch-node.hi{ border-color:rgba(6,182,212,0.4); background:rgba(6,182,212,0.08); }
.arch-sub-row{ display:flex; gap:8px; margin-top:12px; justify-content:center; flex-wrap:wrap; }
.arch-sub-row span{ font-family:var(--f-mono); font-size:10.5px; padding:5px 11px; border-radius:100px; border:1px solid var(--dark-border); color:var(--dark-ink-dim); }
.arch-connector{ width:1px; height:22px; background:repeating-linear-gradient(180deg, rgba(255,255,255,0.28) 0 4px, transparent 4px 9px); }

/* ===========================================================
   TECHNOLOGY
   =========================================================== */
.tech-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:56px; }
.tech-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:28px; }
.tech-card h4{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.tech-card ul li{ font-size:14.5px; color:var(--ink-dim); padding:9px 0; border-top:1px solid var(--border); }
.tech-card ul li:first-child{ border-top:none; }
@media (max-width:980px){ .tech-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .tech-grid{ grid-template-columns:1fr; } }

/* ===========================================================
   CASE STUDIES
   =========================================================== */
.case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; }
.case-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:30px 26px; transition:transform .25s ease, box-shadow .25s ease; }
.case-card:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -30px rgba(15,23,42,0.2); }
.case-card h4{ font-size:18px; margin-bottom:20px; }
.case-block{ margin-bottom:16px; }
.case-block h5{ font-family:var(--f-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }
.case-block p{ font-size:14px; color:var(--ink-dim); line-height:1.65; }
.case-card .sc-link{ margin-top:8px; font-size:14px; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:6px; }
@media (max-width:980px){ .case-grid{ grid-template-columns:1fr; } }

/* ===========================================================
   WHY SARATEK
   =========================================================== */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; }
.why-card{ padding:32px 0 0; border-top:2px solid var(--ink); }
.why-card b{ display:block; font-size:17px; margin-bottom:12px; }
.why-card p{ font-size:14.5px; color:var(--ink-dim); line-height:1.7; }
@media (max-width:860px){ .why-grid{ grid-template-columns:1fr; } }

/* ===========================================================
   FINAL CTA
   =========================================================== */
.final-cta{ text-align:center; }
.final-cta h2{ font-size:clamp(30px,4vw,48px); max-width:680px; margin:0 auto; }
.final-cta p{ color:var(--dark-ink-dim); margin-top:18px; max-width:480px; margin-left:auto; margin-right:auto; font-size:16.5px; }
.final-cta .btn{ margin-top:34px; }

/* ===========================================================
   FOOTER
   =========================================================== */
footer{ border-top:1px solid var(--border); padding:64px 0 32px; background:var(--white); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; }
.footer-brand img{ height:20px; margin-bottom:16px; }
.footer-brand p{ color:var(--ink-dim); font-size:14px; max-width:280px; line-height:1.7; }
.footer-col h5{ font-family:var(--f-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:18px; }
.footer-col a{ display:block; font-size:14.5px; color:var(--ink-dim); padding:6px 0; transition:color .2s ease; }
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{ border-top:1px solid var(--border); padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--ink-faint); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ===========================================================
   SCROLL REVEAL
   =========================================================== */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }