:root{
  /* Light palette */
  --bg:#ffffff;         /* page background */
  --surface:#f7f9fc;    /* cards / surfaces */
  --ink:#0f172a;        /* primary text */
  --muted:#475569;      /* secondary text */
  --line:#e6edf5;       /* borders/dividers */
  --chip:#eef2ff;       /* pills/chips */

  --primary:#6a4cff;    /* purple */
  --primary-2:#532bff;
  --accent:#2ad4ff;     /* cyan accent */

  --radius:16px;
  --shadow-sm:0 8px 24px rgba(15,23,42,.06);
  --shadow:0 18px 60px rgba(15,23,42,.12);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
.ns-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{height:72px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800;letter-spacing:.3px;display:flex;align-items:center;gap:10px}
.brand-mark{display:inline-flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff}
.nav{display:flex;gap:22px;align-items:center}
.nav a{opacity:.9}
.nav .btn{margin-left:6px}
.nav-ctrls{display:flex;gap:8px}
.icon-btn{border:1px solid var(--line);background:transparent;border-radius:999px;padding:10px 12px;cursor:pointer;color:var(--ink)}
#hamburger{display:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);padding:10px 16px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border:0}
.btn-secondary{background:#fff;color:#0e1320;border:0}
.btn-lg{padding:14px 22px;font-weight:700}

/* Hero */
.eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-size:12px;margin:24px 0 6px}
.display{font-size:clamp(38px,6vw,64px);line-height:1.04;margin:0 0 18px}
.grad{-webkit-text-fill-color:transparent;background:linear-gradient(90deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding:32px 0}
.hero-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.hc-top{display:flex;gap:8px;padding:10px;border-bottom:1px solid var(--line)}
.hc-top .dot{width:10px;height:10px;border-radius:999px;background:var(--line)}
.mock{aspect-ratio:16/10;object-fit:cover}
.cta-row{display:flex;align-items:center;gap:18px;margin-top:6px}
.avatar-stack{display:flex}
.avatar-stack img{width:36px;height:36px;border-radius:999px;border:2px solid var(--bg);margin-left:-10px}
.mini-note{font-size:13px;color:var(--muted)}

/* Cards / Sections */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:20px;box-shadow:var(--shadow-sm)}
.card .big{font-size:32px;color:var(--primary);}

/* Featured case */
.featured{padding:44px 0}
.featured.alt{background:linear-gradient(180deg,transparent 0%, color-mix(in oklab,var(--primary) 10%, transparent) 100%)}
.featured-card{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.fc-media{position:relative}
.fc-media:before{content:"";position:absolute;inset:0;background:radial-gradient(1000px 1000px at 10% 110%, rgba(122,97,255,.12), transparent)}
.fc-media img{width:100%;height:100%;object-fit:cover}
.fc-media.framed{padding:26px;background:linear-gradient(135deg,rgba(122,97,255,.10),rgba(0,212,255,.10));}
.fc-media.framed img{border-radius:12px;box-shadow:0 24px 48px rgba(15,23,42,.15)}
.fc-body{padding:24px}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.pill{font-size:12px;background:var(--chip);border:1px solid var(--line);padding:6px 10px;border-radius:999px}
.meta{list-style:none;padding:0;margin:0 0 14px;color:var(--muted)}
.meta li{margin-bottom:6px}

/* Logos strip */
.logos{padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.logos-row{display:flex;gap:22px;align-items:center;justify-content:center}
.logos-row i{font-size:28px;color:var(--muted)}

/* Testimonials */
.t-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:24px;height:auto}
.t-meta{display:flex;align-items:center;gap:12px;margin-top:12px}
.t-meta img{width:42px;height:42px;border-radius:999px}

/* CTA */
.cta{padding:18px 0 60px}
.cta-inner{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;padding:28px;border-radius:16px;box-shadow:var(--shadow)}
.cta-inner .btn{background:rgba(255,255,255,.18);color:#fff;border:0}

/* Page hero */
.page-hero{padding:36px 0 16px;border-bottom:1px solid var(--line)}
.page-hero h1{margin:0;font-size:clamp(32px,5vw,48px)}

/* Tabs */
.tabs{display:flex;gap:10px;flex-wrap:wrap;padding:16px 0}
.tabs .tab{border:1px solid var(--line);padding:8px 12px;border-radius:999px;background:var(--surface);cursor:pointer}
.tabs .tab.active{background:var(--ink);color:var(--bg)}  /* stronger contrast in light mode */

/* Projects */
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:10px 0 40px}
.project-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;cursor:pointer;transition:.25s transform, .25s box-shadow;box-shadow:var(--shadow-sm)}
.project-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:var(--shadow)}
.pc-media img{aspect-ratio:16/10;object-fit:cover}
.pc-body{padding:16px}
.pc-body h3{margin:6px 0 8px}

/* Company */
.values .card h3{margin:0 0 6px}
.process .steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.process .steps li{padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);font-weight:600}
.process .steps li span{margin-right:10px;color:var(--primary)}
.team .profile{display:flex;flex-direction:column;align-items:center;gap:6px}
.team .profile img{width:180px;height:180px;border-radius:16px;object-fit:cover}

/* Contact */
.contact-tabs .tab-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.contact-tabs .tab-buttons .tab{border:1px solid var(--line);background:var(--surface);padding:10px 12px;border-radius:999px;cursor:pointer}
.contact-tabs .tab-buttons .tab.active{background:var(--ink);color:var(--bg)}
.form{display:none;margin-top:16px;border:1px solid var(--line);background:var(--surface);padding:18px;border-radius:16px;box-shadow:var(--shadow-sm)}
.form.active{display:block}
.form label{display:block;font-weight:600;margin-bottom:12px}
.form input,.form textarea,.form select{width:100%;margin-top:6px;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.toast{position:fixed;right:18px;bottom:18px;background:#fff;color:#0e1320;padding:10px 14px;border-radius:10px;opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:16px 0 40px}
.blog-card{border:1px solid var(--line);background:var(--surface);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.blog-card img{aspect-ratio:16/9;object-fit:cover}
.blog-card .body{padding:16px}

/* Footer */
.ns-footer{border-top:1px solid var(--line);margin-top:40px;padding:26px 0 10px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px}
.b-lg{font-size:20px;font-weight:800;margin-bottom:8px}
.socials{display:flex;gap:10px;margin-top:10px}
.legal{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:10px;margin-top:12px}

/* Swiper tweaks */
.swiper{padding:10px 6px}
.swiper-pagination-bullet-active{background:var(--primary)}

/* Responsive */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr;gap:22px}
  .grid-3{grid-template-columns:1fr}
  .featured-card{grid-template-columns:1fr}
  .process .steps{grid-template-columns:1fr 1fr}
  .projects-grid{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr 1fr}
  #hamburger{display:inline-flex}
  .nav{position:fixed;inset:72px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);display:none;flex-direction:column;padding:16px}
  .nav.open{display:flex}
}
@media (max-width: 640px){
  .process .steps{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .form .two{grid-template-columns:1fr}
}

/* Remove your old 3 rules and use this gated version */
.has-transitions body{ opacity:.001; transform: translateY(6px); }
.has-transitions body.page-ready{ opacity:1; transform:none; transition: opacity .35s ease, transform .35s ease; }
.has-transitions body.page-exit{ opacity:0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; }


/* Slightly stronger AOS translate for cards on large screens */
@media (min-width: 980px){
  [data-aos="fade-up"]   { transform: translate3d(0,24px,0); }
  [data-aos="fade-left"] { transform: translate3d(24px,0,0); }
}

/* ==== Fit-all-screens hardening (append to end of file) ==== */

:root { --container: 1200px; }

/* Prevent any side-scroll/auto zooming quirks */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Smarter container sizing with safe padding */
.container{
  width: min(100%, var(--container));
  padding-inline: clamp(12px, 3vw, 24px);
  margin-inline: auto;
}

/* Media should never escape their boxes */
img, video, canvas, svg, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Card/media frames keep aspect without overflow */
.pc-media,
.fc-media { overflow: hidden; }

.pc-media { aspect-ratio: 16 / 10; }
.pc-media img{ width:100%; height:100%; object-fit: cover; }

/* Ensure mock screenshots scale inside hero card */
.mock{ width:100%; height:auto; }

/* Wrap long copy instead of stretching layout */
h1, h2, h3, p, .btn, .pill, .tab, .mini-note { word-break: break-word; }

/* Navigation never overflows */
.nav-wrap{ flex-wrap: wrap; gap: 10px; }
.nav{ gap: 16px; }
@media (max-width: 980px){
  .nav{
    max-height: calc(100dvh - 72px);
    overflow: auto;
  }
}

/* Flexible rows: logos, CTA, avatar stack, etc. */
.logos-row,
.cta-inner,
.avatar-stack{ flex-wrap: wrap; }

.cta-inner{ row-gap: 12px; }

/* Grids: guard against overflow on narrow screens */
.footer-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

/* Projects/blog: small screens already handled; add big-screen guard */
.projects-grid,
.blog-grid{
  grid-auto-rows: 1fr;
}

/* Forms: avoid two-column squeeze on mid devices */
@media (max-width: 820px){
  .form .two{ grid-template-columns: 1fr; }
}

/* Safe viewport on modern mobiles */
@supports (height: 100svh){
  .nav{ max-height: calc(100svh - 72px); }
}

/* Buttons should never exceed container width on tiny screens */
.btn{ max-width: 100%; }

/* Extra protection for sections that might get side margins clipped */
section, .card, .project-card, .featured-card, .t-card, .form {
  overflow: hidden;
  border-radius: min(var(--radius), 18px);
}

/* Optional: reduce huge headings on very small phones */
@media (max-width: 360px){
  .display{ font-size: clamp(28px, 9vw, 40px); }
}

/* =========================
   NovaSphere Home Additions
   ========================= */

/* About / Stats Section */
#about {
  padding: 60px 0;
  text-align: center;
}
#about h2 {
  font-size: 2rem;
  margin-bottom: 12px;
}
#about p {
  color: var(--muted);
  max-width: 700px;
  margin: 0 auto 32px;
  font-size: 1rem;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 28px;
  margin-top: 20px;
}
.stats-grid div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 16px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.stats-grid div:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.stats-grid h3 {
  font-size: 2rem;
  color: var(--primary);
  margin: 0 0 4px;
}
.stats-grid p {
  margin: 0;
  color: var(--muted);
}

/* Process Section */
#process {
  padding: 70px 0;
  text-align: center;
}
#process h2 {
  font-size: 2rem;
  margin-bottom: 36px;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.process-step {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 30px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}
.process-step:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}
.process-step i {
  font-size: 36px;
  color: var(--primary);
  margin-bottom: 10px;
}
.process-step h4 {
  margin: 6px 0;
}
.process-step p {
  color: var(--muted);
  font-size: 15px;
}

/* Testimonials (Swiper) */
#testimonials {
  padding: 80px 0;
}
#testimonials .section-head h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
}
.swiper {
  padding-bottom: 40px;
}
.swiper-slide {
  transition: transform .3s ease;
}
.swiper-slide:hover {
  transform: translateY(-5px);
}
.t-card {
  height: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px;
  box-shadow: var(--shadow-sm);
}
.t-card p {
  font-style: italic;
  color: var(--ink);
  font-size: 15.5px;
}
.t-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.t-meta div span {
  display: block;
  font-size: 13px;
  color: var(--muted);
}

/* Newsletter Footer Extension */
.newsletter {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.newsletter input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
}
.newsletter button {
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease;
}
.newsletter button:hover {
  transform: translateY(-2px);
}

/* Footer Enhancements */
.ns-footer {
  background: var(--surface);
  padding: 60px 0 20px;
}
.ns-footer h4 {
  margin-bottom: 10px;
  font-weight: 700;
}
.ns-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ns-footer ul li {
  margin-bottom: 8px;
}
.ns-footer ul li a {
  color: var(--muted);
  font-size: 15px;
  transition: color .2s;
}
.ns-footer ul li a:hover {
  color: var(--primary);
}
.socials a {
  font-size: 20px;
  color: var(--muted);
  transition: color .25s;
}
.socials a:hover {
  color: var(--primary);
}

/* Section spacing consistency */
section {
  scroll-margin-top: 80px;
}