:root{
  --bg:#0f1115;           /* near black */
  --surface:#171a21;      /* dark slate */
  --muted:#20242d;        /* cards */
  --edge:#2b303b;         /* borders */
  --text:#e9edf1;         /* primary text */
  --sub:#b7c0cb;          /* secondary text */
  --accent:#ff7a1a;       /* fox orange */
  --accent-2:#ff9a3e;     /* lighter orange */
  --accent-dark:#b04b10;  /* deep fox */
  --ok:#34d399;
  --warn:#f59e0b;
  --err:#ef4444;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  overflow-x:hidden;

  /* Seamless, non-repeating gradient field */
  background-image:
    radial-gradient(1000px 700px at 80% -10%, rgba(255,122,26,.14) 0%, rgba(255,122,26,.08) 35%, rgba(255,122,26,0) 70%),
    radial-gradient(800px 600px at -10% 25%, rgba(255,154,62,.10) 0%, rgba(255,154,62,.05) 40%, rgba(255,154,62,0) 75%),
    linear-gradient(180deg, rgba(255,122,26,.03) 0%, rgba(255,122,26,0) 40%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 80% -10%, -10% 25%, 0 0;
  /* lock the big glow layers to the viewport so seams don't "meet" elements */
  background-attachment: fixed, fixed, scroll;
}

/* Layout helpers */
.container{max-width:1100px; margin-inline:auto; padding-inline:22px}
.btn{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; font-weight:600; padding:.9rem 1.1rem; border-radius:14px; border:1px solid transparent; transition:.2s ease; cursor:pointer}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0b0d11;}
.btn.primary:hover{background: linear-gradient(135deg, var(--muted), var(--muted)); color: var(--accent);}
.btn.ghost{border-color:var(--edge); color:var(--text); background:transparent}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent)}

/* Header */
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(10px); background:rgba(15,17,21,.6); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:64px}
.brand{display:flex; align-items:center; gap:.75rem; font-weight:800; letter-spacing:.3px}
.brand img {width: 30px; height: 30px; display: inline-block;}

/* Header brand: double size + no underline */
.brand span { font-size: 2.1rem; }  /* was 1.05rem */
.brand span { color: var(--accent); }
.brand, .brand:hover, .brand:focus { text-decoration: none; }
nav ul{display:flex; list-style:none; margin:0; padding:0; gap:1rem}
nav a{color:var(--sub); text-decoration:none; padding:.6rem .75rem; border-radius:10px}
nav a:hover{color:var(--text); background:rgba(255,255,255,.04)}
.nav-cta{display:flex; align-items:center; gap:.6rem}
.burger{display:none; background:none; border:0; color:var(--text); padding:.4rem; border-radius:10px}

/* Mobile menu */
@media (max-width: 860px){
  nav ul{display:none}
  .burger{display:block}
  .mobile-menu{display:none; position:absolute; top:64px; left:0; right:0; background:rgba(15,17,21,.98); border-bottom:1px solid rgba(255,255,255,.06)}
  .mobile-menu.open{display:block}
  .mobile-menu a{display:block; padding:1rem 1.2rem; color:var(--sub); text-decoration:none; border-top:1px solid rgba(255,255,255,.06)}
  .mobile-menu a:hover{background:#14171c; color:var(--text)}
}

/* Hero */
.hero{padding:72px 0 40px}
.hero .wrap{display:grid; grid-template-columns: 1.1fr .9fr; gap:34px; align-items:center}
.eyebrow{color:var(--accent-2); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem}
h1{font-size: clamp(2rem, 4vw + .6rem, 3.2rem); margin:.6rem 0 .8rem}
.lead{color:var(--sub); font-size: clamp(1rem, 1.2vw + .8rem, 1.2rem)}
.cta{margin-top:1.2rem; display:flex; flex-wrap:wrap; gap:.8rem}
.hero-card{background:linear-gradient(180deg,#191c23, #141821); border:1px solid #2b303b; border-radius:var(--radius); padding:1.1rem; box-shadow:var(--shadow)}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px}
.kpi{background:#11141a; border:1px solid #262b36; border-radius:14px; padding:.9rem}
.kpi strong{font-size:1.35rem}

@media (max-width: 860px){
  .hero{padding:52px 0 22px}
  .hero .wrap{grid-template-columns:1fr}
}

/* Sections */
section{padding:54px 0}
.section-title{font-size: 2.4rem; margin:0 0 .6rem}
.section-sub{color:var(--sub); margin:0 0 1.4rem}

/* Features grid */
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns: repeat(3, 1fr)}
.card{background:var(--muted); border:1px solid var(--edge); border-radius:var(--radius); padding:1rem}
.icon{width:28px; height:28px; display:inline-grid; place-items:center; border-radius:10px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0a0c10}
.card h3{margin:.8rem 0 .4rem; font-size:1.05rem}
.card p{margin:0; color:var(--sub)}
@media (max-width: 900px){ .grid.cols-3{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .grid.cols-3{grid-template-columns:1fr} }

/* Services */
.service{display:flex; gap:14px; align-items:flex-start}
.service h4{margin:.15rem 0 .2rem}
.service p{margin:0; color:var(--sub)}

/* Pricing */
.pricing{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.plan{background:linear-gradient(180deg, #1b202a, #14181f); border:1px solid #2d3441; border-radius:var(--radius); padding:1.2rem; position:relative}
.plan.popular{outline:2px solid var(--accent);}
.price{font-size:2rem; font-weight:800}
.plan ul{margin:.8rem 0 1rem; padding:0 0 0 1rem; color:var(--sub)}
@media (max-width: 980px){ .pricing{grid-template-columns:1fr} }

/* Callout */
.callout{background:linear-gradient(135deg, rgba(255,122,26,.12), rgba(255,154,62,.05)); border:1px dashed rgba(255,122,26,.35); border-radius:var(--radius); padding:1rem}

/* Footer */
footer{padding:40px 0; color:var(--sub); border-top:1px solid rgba(255,255,255,.06)}
footer .foot{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

/* Accents & focus */
a:focus, button:focus{outline:2px solid var(--accent); outline-offset:2px}
.tag{display:inline-block; border:1px solid var(--edge); color:var(--sub); padding:.25rem .55rem; border-radius:999px; font-size:.78rem}

/* Small helper animations */
@keyframes floaty {0%{transform:translateY(0)} 50%{transform:translateY(-6px)} 100%{transform:translateY(0)}}
.floaty{animation: floaty 6s ease-in-out infinite}

/* ---------- Contact form controls (restores input/textarea styles) ---------- */
input, textarea{
  width:100%;
  margin:.25rem 0 .7rem;
  padding:.8rem .9rem;
  color:var(--text);
  background:#0e1116;
  border:1px solid #2c3441;
  border-radius:12px;
}
input::placeholder,
textarea::placeholder{
  color:#7b8594;
}