:root{
  --navy:#0a2f4d;
  --navy-2:#0f3f63;
  --barik-500:#1c6ca3;
  --barik-800:#0a2f4d;
  --teal:#2a9d8f;
  --teal-light:#5fc4b6;
  --amber:#ffbe00;
  --paper:#f7f8fb;
  --white:#ffffff;
  --ink:#10131f;
  --ink-soft:#525a70;
  --line:#e3e6ef;

  --radius:14px;
  --font-display:'Inter', sans-serif;
  --font-body:'DM Sans', sans-serif;
  --font-mono:'DM Mono', monospace;

  --wrap:1180px;
}

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

html{font-size:16px;}

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

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

a{color:inherit;text-decoration:none;}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-0.02em;
}

em{font-style:normal;color:var(--teal);}

img{max-width:100%;display:block;}

/* ===== noise overlay for texture ===== */
.noise-overlay{
  position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.95rem;
  padding:.85rem 1.6rem;
  border-radius:999px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--teal);
  color:var(--white);
  box-shadow:0 8px 24px -8px rgba(42,157,143,.55);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(42,157,143,.65);}
.btn-outline{
  border:1.5px solid var(--line);
  color:var(--ink);
  padding:.75rem 1.5rem;
  width:100%;
  justify-content:center;
}
.btn-outline:hover{border-color:var(--teal);color:var(--teal);}
.btn-ghost{
  border:1.5px solid rgba(255,255,255,.25);
  color:var(--white);
  padding:.6rem 1.3rem;
  font-size:.85rem;
}
.btn-ghost:hover{background:rgba(255,255,255,.08);}
.hero .btn-link {
  color: var(--white);
  background: transparent;
  border: none;
    border-bottom-width: medium;
    border-bottom-style: none;
    border-bottom-color: currentcolor;
  border-bottom: 2px solid var(--amber);
}
.btn-link-light{color:var(--white);}

/* ===== header ===== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--navy);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:1.1rem;
  padding-bottom:1.1rem;
}
.brand{
  font-family:var(--font-mono);
  font-size:1.05rem;
  color:var(--white);
  letter-spacing:-0.02em;
  display:flex;align-items:baseline;gap:2px;
}
.brand-mark{font-weight:500;}
.brand-dot{color:var(--teal-light);}
.brand-sub{color:var(--teal-light);font-size:.85rem;}
.main-nav{
  display:flex;
  gap:2.2rem;
  font-size:.92rem;
  color:rgba(255,255,255,.72);
}
.main-nav a:hover{color:var(--white);}

@media (max-width:860px){
  .main-nav{display:none;}
}

/* ===== hero ===== */
.hero{
  background:
    radial-gradient(1200px 340px at 40% -120px, var(--barik-500), var(--barik-800));
  color:var(--white);
  padding:5rem 0 6rem;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:4rem;
  align-items:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--teal-light);
  margin-bottom:1.4rem;
}
.eyebrow-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--teal-light);
  box-shadow:0 0 0 4px rgba(95,196,182,.2);
}
.hero h1{
  font-size:clamp(2.4rem, 4.2vw, 3.6rem);
  color:var(--white);
  margin-bottom:1.4rem;
}
.hero-lede{
  font-size:1.08rem;
  color:rgba(255,255,255,.72);
  max-width:44ch;
  margin-bottom:2.1rem;
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:1.8rem;
  flex-wrap:wrap;
  margin-bottom:1.4rem;
}
.hero .btn-link{color:var(--white);border-bottom-color:var(--amber);}
.hero-trust{
  font-size:.85rem;
  color:rgba(255,255,255,.5);
  font-family:var(--font-mono);
}

/* ===== hero terminal panel (signature element) ===== */
.hero-panel{
  background:var(--navy-2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
}
.panel-chrome{
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:.85rem 1.1rem;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.dot{width:9px;height:9px;border-radius:50%;}
.dot-r{background:#ff5f56;}
.dot-y{background:#ffbd2e;}
.dot-g{background:#27c93f;}
.panel-title{
  margin-left:.6rem;
  font-family:var(--font-mono);
  font-size:.78rem;
  color:rgba(255,255,255,.4);
}
.panel-body{
  padding:1.4rem 1.3rem 1.6rem;
  font-family:var(--font-mono);
}
.metric-row{
  display:flex;
  justify-content:space-between;
  padding:.55rem 0;
  border-bottom:1px dashed rgba(255,255,255,.08);
  font-size:.85rem;
}
.metric-row:first-child{padding-top:0;}
.metric-label{color:rgba(255,255,255,.5);}
.metric-value{color:rgba(255,255,255,.85);font-weight:500;}
.metric-value.ok{color:var(--teal-light);}
.panel-divider{
  height:1px;
  background:rgba(255,255,255,.08);
  margin:1rem 0;
}
.panel-log p{
  font-size:.76rem;
  color:rgba(255,255,255,.42);
  padding:.25rem 0;
}
.log-tag{color:var(--amber);}

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

/* ===== trust strip ===== */
.trust-strip{
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.trust-inner{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:2.2rem 28px;
}
.trust-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.2rem;
  border-left:1px solid var(--line);
}
.trust-item:first-child{border-left:none;}
.trust-num{
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:700;
  color:var(--teal);
}
.trust-label{
  font-size:.78rem;
  color:var(--ink-soft);
  font-family:var(--font-mono);
}
@media (max-width:760px){
  .trust-inner{grid-template-columns:repeat(2,1fr);gap:1.6rem 0;}
  .trust-item:nth-child(3){border-left:none;}
}

/* ===== sections ===== */
.section{padding:6rem 0;}
.section-alt{background:var(--white);}
.section-eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--teal);
  margin-bottom:.9rem;
}
.section-eyebrow-light{color:var(--teal-light);}
.section-title{
  font-size:clamp(1.9rem, 3vw, 2.6rem);
  max-width:22ch;
  margin-bottom:1.2rem;
}
.section-title-light{color:var(--white);}
.section-lede{
  color:var(--ink-soft);
  max-width:60ch;
  font-size:1.05rem;
  margin-bottom:3rem;
}

/* ===== feature grid ===== */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.6rem;
  margin-top:1rem;
}
.feature-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2rem;
}
.feature-index{
  font-family:var(--font-mono);
  color:var(--teal);
  font-size:.85rem;
  display:block;
  margin-bottom:.9rem;
}
.feature-card h3{
  font-size:1.35rem;
  margin-bottom:.6rem;
}
.feature-card p{color:var(--ink-soft);font-size:.96rem;}

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

/* ===== who this is for ===== */
.who-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.4rem;
}
.who-card{
  padding:1.6rem;
  border-left:3px solid var(--teal);
  background:var(--paper);
  border-radius:0 var(--radius) var(--radius) 0;
}
.who-card h3{font-size:1.1rem;margin-bottom:.5rem;}
.who-card p{color:var(--ink-soft);font-size:.9rem;}

@media (max-width:960px){
  .who-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .who-grid{grid-template-columns:1fr;}
}

/* ===== pricing ===== */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
}
.price-card{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2.2rem 1.8rem 1.8rem;
  display:flex;
  flex-direction:column;
}
.price-featured{
  border-color:var(--teal);
  box-shadow:0 20px 40px -18px rgba(42,157,143,.35);
  transform:translateY(-6px);
}
.price-badge{
  position:absolute;
  top:-13px;left:1.8rem;
  background:var(--amber);
  color:var(--navy);
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:700;
  padding:.3rem .7rem;
  border-radius:999px;
}
.price-tier{
  font-family:var(--font-mono);
  color:var(--teal);
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:.6rem;
}
.price-amount{
  font-family:var(--font-display);
  font-size:2.4rem;
  font-weight:700;
  margin-bottom:1.4rem;
}
.price-amount span{
  font-size:1.05rem;
  font-weight:500;
  color:var(--ink-soft);
}
.price-amount .price-period{
  display:block;
  font-family:var(--font-body);
  font-size:.85rem;
  margin-top:.1rem;
}
.price-specs{
  list-style:none;
  margin-bottom:1.2rem;
  border-top:1px solid var(--line);
  padding-top:1.1rem;
}
.price-specs li{
  display:flex;
  justify-content:space-between;
  font-size:.9rem;
  padding:.4rem 0;
  color:var(--ink-soft);
}
.price-specs strong{color:var(--ink);}
.price-bonus{
  list-style:none;
  margin-bottom:1.6rem;
  flex-grow:1;
}
.price-bonus li{
  font-size:.85rem;
  color:var(--ink-soft);
  padding:.3rem 0;
  padding-left:1.3rem;
  position:relative;
}
.price-bonus li::before{
  content:"✓";
  position:absolute;left:0;
  color:var(--teal);
  font-weight:700;
}

@media (max-width:960px){
  .pricing-grid{grid-template-columns:repeat(2,1fr);}
  .price-featured{transform:none;}
}
@media (max-width:600px){
  .pricing-grid{grid-template-columns:1fr;}
}

/* ===== included (dark section) ===== */
.section-dark{
  background:var(--navy);
  color:var(--white);
}
.included-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem 2.4rem;
}
.included-item h3{
  color:var(--white);
  font-size:1.2rem;
  margin:.7rem 0 .5rem;
}
.included-item p{color:rgba(255,255,255,.6);font-size:.92rem;}
.included-icon{font-size:1.5rem;}

@media (max-width:860px){
  .included-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .included-grid{grid-template-columns:1fr;}
}

/* ===== steps ===== */
.steps{
  list-style:none;
  counter-reset:step;
  display:grid;
  gap:1.8rem;
  max-width:820px;
}
.step{
  display:flex;
  gap:1.6rem;
  align-items:flex-start;
  padding-bottom:1.8rem;
  border-bottom:1px solid var(--line);
}
.step:last-child{border-bottom:none;}
.step-index{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.8rem;
  color:var(--teal);
  min-width:2.4rem;
}
.step h3{font-size:1.25rem;margin-bottom:.4rem;}
.step p{color:var(--ink-soft);font-size:.95rem;}

/* ===== final CTA ===== */
.final-cta{
  position:relative;
  background-color:var(--navy);
  background-image:
    radial-gradient(900px 400px at 15% 110%, rgba(255,190,0,.18), transparent 60%),
    linear-gradient(180deg, rgba(10,47,77,.88), rgba(10,47,77,.93)),
    url('https://images.unsplash.com/photo-1544197150-b99a580bb7a8?auto=format&fit=crop&w=1800&q=80');
  background-size:auto, auto, cover;
  background-position:center, center, center 35%;
  background-repeat:no-repeat;
  background-attachment:scroll, scroll, fixed;
  color:var(--white);
  padding:5.5rem 0;
  text-align:center;
}

@media (max-width:900px){
  /* fixed attachment is unreliable on mobile browsers; fall back to scroll */
  .final-cta{
    background-attachment:scroll, scroll, scroll;
  }
}
.final-cta-inner h2{
  font-size:clamp(1.9rem, 3.4vw, 2.8rem);
  color:var(--white);
  max-width:22ch;
  margin:0 auto 2rem;
}
.final-cta-actions{
  justify-content:center;
}

/* ===== footer ===== */
.site-footer{
  background:var(--navy);
  border-top:1px solid rgba(255,255,255,.08);
  padding:2rem 0;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.8rem;
}
.brand-footer{color:rgba(255,255,255,.7);}
.footer-note{
  color:rgba(255,255,255,.4);
  font-size:.85rem;
}

/* ===== platform / server power section ===== */
.platform-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:4rem;
  align-items:center;
}
.platform-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:420px;
}
.visual-core{
  position:relative;
  width:220px;
  height:220px;
  border-radius:50%;
  background:linear-gradient(160deg, var(--navy), var(--navy-2));
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 30px 60px -24px rgba(10,47,77,.45);
}
.visual-ring{
  position:absolute;
  inset:-22px;
  border:1.5px dashed rgba(42,157,143,.35);
  border-radius:50%;
}
.visual-ring-2{
  inset:-46px;
  border-color:rgba(42,157,143,.16);
}
.visual-mark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:2.6rem;
  color:var(--teal-light);
  letter-spacing:-0.02em;
}
.visual-badge{
  position:absolute;
  top:0;
  left:var(--orbit-r, 190px);
  display:flex;
  align-items:center;
  gap:.55rem;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.55rem 1rem .55rem .6rem;
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--ink);
  box-shadow:0 14px 30px -14px rgba(10,47,77,.25);
  white-space:nowrap;
  animation:counter-spin 26s linear infinite;
  animation-play-state:running;
}
.orbit{
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  animation:orbit-spin 26s linear infinite;
}
@keyframes orbit-spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@keyframes counter-spin{
  from{transform:translateY(-50%) rotate(0deg);}
  to{transform:translateY(-50%) rotate(-360deg);}
}
.badge-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.6rem;height:1.6rem;
  border-radius:50%;
  background:var(--paper);
  font-size:.9rem;
}

@media (max-width:1040px){
  :root{ }
  .platform-visual{ --orbit-r:150px; }
  .visual-badge{font-size:.72rem;padding:.45rem .8rem .45rem .5rem;left:var(--orbit-r,150px);}
  .badge-icon{width:1.4rem;height:1.4rem;}
}
@media (max-width:600px){
  .platform-visual{ --orbit-r:110px; }
  .visual-badge{left:var(--orbit-r,110px);}
}

.platform-title{max-width:none;}
.platform-lede{margin-bottom:2.2rem;}

.platform-feature{
  display:flex;
  gap:1.1rem;
  align-items:flex-start;
  padding:1.3rem 0;
  border-top:1px solid var(--line);
}
.platform-feature:first-of-type{border-top:none;}
.platform-feature-icon{
  font-size:1.4rem;
  flex-shrink:0;
  width:2.6rem;height:2.6rem;
  border-radius:50%;
  background:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.platform-feature h3{
  font-size:1.1rem;
  margin-bottom:.35rem;
}
.platform-feature p{
  color:var(--ink-soft);
  font-size:.92rem;
}
.platform-cta{margin-top:2rem;}

@media (max-width:900px){
  .platform-grid{grid-template-columns:1fr;}
  .platform-visual{min-height:320px;margin-bottom:1rem;}
}

/* ===== soft reveal on scroll ===== */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1);
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ===== focus visibility ===== */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  .btn{transition:none;}
  .reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .orbit, .visual-badge{
    animation:none !important;
  }
  .orbit:nth-of-type(1){transform:rotate(0deg);}
  .orbit:nth-of-type(2){transform:rotate(90deg);}
  .orbit:nth-of-type(3){transform:rotate(180deg);}
  .orbit:nth-of-type(4){transform:rotate(270deg);}
  .orbit:nth-of-type(1) .visual-badge{transform:translateY(-50%) rotate(0deg);}
  .orbit:nth-of-type(2) .visual-badge{transform:translateY(-50%) rotate(-90deg);}
  .orbit:nth-of-type(3) .visual-badge{transform:translateY(-50%) rotate(-180deg);}
  .orbit:nth-of-type(4) .visual-badge{transform:translateY(-50%) rotate(-270deg);}
}