/* ===== IPS 2026 Theme ===== */

/* Tokens */
:root{
  --bg:#0b0b10;
  --panel:#0f1117;
  --ink:#e7e7f0;
  --brand1:#59d0ff;
  --brand2:#c55bff;
  --border:rgba(255,255,255,.10);
  --pill-bg:rgba(255,255,255,.04);
  --pill-bg-hover:rgba(255,255,255,.06);
}

html,body{height:100%;}
body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;}

/* ===== Header ===== */
.site-header{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 70%),
    radial-gradient(1200px 200px at 20% -40px, rgba(89,208,255,.10), transparent 60%),
    radial-gradient(900px 160px at 60% -60px, rgba(197,91,255,.10), transparent 60%);
}
.gradText{
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline{
  color:#b8dfff; letter-spacing:.12em;
  text-shadow:0 0 10px rgba(89,208,255,.25),0 0 10px rgba(197,91,255,.25);
}
.logo-link img{ height:64px; width:auto; image-rendering:-webkit-optimize-contrast; }
@media (min-width:1024px){ .logo-link img{ height:80px; } }

/* Nav pills */
.nav-pill{
  display:inline-block; padding:.55rem .95rem; border-radius:999px;
  border:1px solid var(--border); background:var(--pill-bg);
  color:#e5edff; font-weight:600; font-size:.92rem; line-height:1;
  text-decoration:none; transition:background .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.nav-pill:hover{ background:var(--pill-bg-hover); border-color:rgba(255,255,255,.16); transform:translateY(-1px); }
.nav-pill.is-active{
  background:linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(90deg, var(--brand1), var(--brand2)) border-box;
  border:1px solid transparent; box-shadow:0 0 12px rgba(89,208,255,.25), 0 0 12px rgba(197,91,255,.22);
}

/* ===== Buttons (unified) ===== */
.btn-grad,
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  font-weight:700; padding:.78rem 1.15rem; border-radius:14px; line-height:1;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  will-change: transform;
}
.btn-grad{
  background: linear-gradient(90deg, var(--brand1), var(--brand2)); color:#0b0b10; border:0;
  box-shadow:0 10px 24px rgba(89,208,255,.18), 0 10px 24px rgba(197,91,255,.14);
}
.btn-grad:hover{ transform: translateY(-1px); }
.btn-grad:active{ transform: translateY(0); }

.btn-outline{
  background: var(--pill-bg); color:#e7e7f0; border:1px solid var(--border);
}
.btn-outline:hover{ background: var(--pill-bg-hover); border-color: rgba(255,255,255,.18); transform: translateY(-1px); }
.btn-outline:active{ transform: translateY(0); }

.btn-grad:focus,
.btn-outline:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.06), 0 0 0 6px rgba(89,208,255,.25);
}

.btn-row{ display:flex; gap:1rem; flex-wrap:wrap; }
@media (max-width:520px){ .btn-row > a{ width:100%; justify-content:center; } }
.btn-sm{ padding:.55rem .9rem; font-size:.875rem; border-radius:12px; }

/* ===== Card / Glass ===== */
.glass{
  background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(6px); border-radius:20px;
}
.glass:hover{ border-color:rgba(255,255,255,.14); background:rgba(255,255,255,0.045); }

/* ===== Utilities (Tailwind-lite) ===== */
/* layout */
.min-h-screen{ min-height:100vh; }
.flex{ display:flex; } .flex-col{ flex-direction:column; }
.items-center{ align-items:center; } .justify-center{ justify-content:center; }
.ml-auto{ margin-left:auto; } .hidden{ display:none; }
.relative{ position: relative; } .absolute{ position: absolute; } .inset-0{ top:0; right:0; bottom:0; left:0; }

/* responsive display */
@media (min-width:768px){ .md\:flex{ display:flex; } }

/* container + spacing */
.max-w-7xl{ max-width:80rem; } .max-w-3xl{ max-width:48rem; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.px-4{ padding-left:1rem; padding-right:1rem; }
.py-4{ padding-top:1rem; padding-bottom:1rem; }
.py-12{ padding-top:3rem; padding-bottom:3rem; }
.py-20{ padding-top:5rem; padding-bottom:5rem; }
.p-4{ padding:1rem; } .p-5{ padding:1.25rem; } .p-6{ padding:1.5rem; }
.mt-1{ margin-top:.25rem; } .mt-4{ margin-top:1rem; } .mt-6{ margin-top:1.5rem; } .mt-8{ margin-top:2rem; } .mt-10{ margin-top:2.5rem; } .mt-16{ margin-top:4rem; }
.mb-1{ margin-bottom:.25rem; } .mb-2{ margin-bottom:.5rem; } .mb-3{ margin-bottom:.75rem; } .mb-6{ margin-bottom:1.5rem; }

/* grid */
.grid{ display:grid; }
.gap-2{ gap:.5rem; } .gap-4{ gap:1rem; } .gap-6{ gap:1.5rem; } .gap-8{ gap:2rem; }
@media (min-width:640px){ .sm\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){
  .lg\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lg\:grid-cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .lg\:py-28{ padding-top:7rem; padding-bottom:7rem; }
}

/* borders */
.border-b{ border-bottom:1px solid; } .border-t{ border-top:1px solid; }
.border-white\/10{ border-color:rgba(255,255,255,.10); }

/* type */
.text-xs{ font-size:.75rem; line-height:1rem; }
.text-sm{ font-size:.875rem; line-height:1.25rem; }
.text-lg{ font-size:1.125rem; line-height:1.75rem; }
.text-2xl{ font-size:1.5rem; line-height:2rem; }
.text-3xl{ font-size:1.875rem; line-height:2.25rem; }
.text-4xl{ font-size:2.25rem; line-height:2.5rem; }
.font-semibold{ font-weight:600; } .font-bold{ font-weight:700; } .font-extrabold{ font-weight:800; } .font-black{ font-weight:900; }
.leading-tight{ line-height:1.15; } .tracking-wide{ letter-spacing:.02em; } .tracking-widest{ letter-spacing:.15em; }
@media (min-width:640px){ .sm\:text-6xl{ font-size:3.75rem; line-height:1.05; } }

/* color utils */
.text-white\/60{ color: rgba(255,255,255,.60); }
.text-white\/70{ color: rgba(255,255,255,.70); }
.text-white\/80{ color: rgba(255,255,255,.80); }

/* misc */
.block{ display:block; } .inline-block{ display:inline-block; }
.rounded{ border-radius:.5rem; } .rounded-lg{ border-radius:.5rem; } .rounded-xl{ border-radius:.75rem; } .rounded-2xl{ border-radius:1rem; }
.w-auto{ width:auto; } .w-full{ width:100%; } .h-full{ height:100%; }

/* effects */
.opacity-30{ opacity:.30; }
.blur-3xl{ filter: blur(60px); }
.brand-grad{ background: linear-gradient(90deg, var(--brand1), var(--brand2)); }

/* ===== Footer ===== */
footer ul{ list-style:none; margin:0; padding-left:0; }
footer li + li{ margin-top:.5rem; } /* mimic space-y-2 inside lists */

footer a{ color:#9fc9ff; text-decoration:none; border-bottom:1px solid transparent; transition: color .15s ease, border-color .15s ease; }
footer a:hover{ color:#c8e2ff; border-color: rgba(159,201,255,.35); }
footer .rounded{ border-radius:.5rem; }
footer img.h-10{ height:2.5rem; width:auto; }

/* ===== Products ===== */
.aspect-video{ position:relative; width:100%; padding-top:56.25%; } /* 16:9 */
.aspect-video > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.object-cover{ object-fit:cover; }

.product-card{
  border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.product-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 10px 28px rgba(89,208,255,.14), 0 10px 28px rgba(197,91,255,.12);
}
.product-card .product-name{ color:#eaf1ff; }
.thumb--fallback{
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  filter: saturate(1.2); position:relative;
}
.thumb--fallback::after{
  content:"IPS"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:2.25rem; color:#0b0b10; opacity:.25;
}
@media (max-width:480px){ .mb-6{ margin-bottom:1.25rem; } }

/* ===== Services ===== */
.glass .font-semibold{
  background:linear-gradient(90deg,var(--brand1),var(--brand2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* bottom tiles */
.tile-link{ position:relative; line-height:1.25; border-radius:14px; transition:transform .12s ease, box-shadow .18s ease; }
.tile-link:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(89,208,255,.14),0 10px 24px rgba(197,91,255,.12); }
.tile-title{
  display:block; font-weight:700; margin-bottom:.35rem;
  background:linear-gradient(90deg,var(--brand1),var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tile-sub{ display:block; color:rgba(255,255,255,.72); font-size:.95rem; letter-spacing:.01em; }
@media (max-width:640px){ .grid{ gap:1rem; } .p-5{ padding:1rem; } }

/* ===== Forms ===== */
.space-y-4 > * + *{ margin-top:1rem; }
.glass input[type="text"], .glass input[type="email"], .glass input[type="file"], .glass textarea{
  appearance:none; width:100%; color:#e9eefc;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  padding:.8rem 1rem; border-radius:.65rem; outline:0;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.glass textarea{ resize:vertical; min-height:8rem; }
.glass input::placeholder, .glass textarea::placeholder{ color:rgba(255,255,255,.45); }
.glass input:focus, .glass textarea:focus{
  border-color: rgba(159,201,255,.55); box-shadow: 0 0 0 4px rgba(89,208,255,.18); background: rgba(255,255,255,.055);
}
/* file input button */
.glass input[type="file"]{ padding:.5rem; background:rgba(255,255,255,.04); }
.glass input[type="file"]::-webkit-file-upload-button,
.glass input[type="file"]::file-selector-button{
  font-weight:700; border:1px solid var(--border); background:var(--pill-bg); color:#e7e7f0; border-radius:.5rem; padding:.5rem .75rem;
}
.glass input[type="file"]::-webkit-file-upload-button:hover,
.glass input[type="file"]::file-selector-button:hover{
  background:var(--pill-bg-hover); border-color:rgba(255,255,255,.18);
}
/* alerts */
.alert{ padding:.9rem 1rem; border-radius:.75rem; border:1px solid; font-weight:600; }
.alert-success{ background: rgba(16, 93, 56, .25); border-color: rgba(34, 197, 94, .45); color:#d7ffe9; }
.alert-error{ background: rgba(105, 25, 25, .28); border-color: rgba(239, 68, 68, .5); color:#ffe3e3; }
/* form CTA button */
form button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.78rem 1.15rem; border-radius:14px; font-weight:700; line-height:1;
  background: linear-gradient(90deg, var(--brand1), var(--brand2)); color:#0b0b10; border:0;
  box-shadow: 0 10px 24px rgba(89,208,255,.18), 0 10px 24px rgba(197,91,255,.14);
  transition: transform .12s ease, box-shadow .18s ease;
}
form button:hover{ transform: translateY(-1px); }
form button:active{ transform: translateY(0); }
.form-legal a{ color:#9fc9ff; text-decoration:none; border-bottom:1px solid transparent; }
.form-legal a:hover{ color:#cfe6ff; border-color:rgba(159,201,255,.28); }

/* Stronger specificity so form button text stays visible */
form button.btn-grad{ color:#0b0b10; }

/* Make the whole form box look even */
form.glass{ border-radius:20px; }

/* Optional: tighter textarea radius to match its wrapper */
form textarea.rounded-lg{ border-radius:.65rem; }

/* Fix form controls spilling outside rounded container */
*, *::before, *::after { box-sizing: border-box; }

/* In case you don�t want global box-sizing, this narrower version works too:
form.glass *, 
.glass input[type="text"],
.glass input[type="email"],
.glass input[type="file"],
.glass textarea { box-sizing: border-box; }
*/

/* Make sure grid children can shrink inside the two-column row */
.grid > * { min-width: 0; }

/* Optional: clip any tiny subpixel bleed on rounded forms (keeps focus rings neat) */
form.glass { overflow: hidden; }

/* Footer: harden the layout and reset lists */
.footer-grid{
  display:grid;
  grid-template-columns: 1fr;        /* mobile */
  gap: 2rem;
}

@media (min-width:768px){
  .footer-grid{
    grid-template-columns: 2fr 1fr 1fr 1fr; /* logo/desc gets more space */
  }
}

footer ul, footer ol{
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* keep vertical rhythm inside lists even without bullets */
footer ul.space-y-2 > * + *{ margin-top: .5rem; }


/* Global ambient glow for every page (beefed up) */
.site-bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* sits behind header/main/footer */
  filter: blur(72px);
  /* don't use overall opacity; control alpha per color stop so it actually shows */
  background:
    /* left-top cyan bloom */
    radial-gradient(900px 520px at 18% 0%, rgba(89,208,255,.28), transparent 60%),
    /* right-top magenta bloom */
    radial-gradient(1000px 560px at 82% -6%, rgba(197,91,255,.26), transparent 62%),
    /* center-soft fill so hero doesn�t look empty */
    radial-gradient(700px 420px at 50% 55%, rgba(89,208,255,.12), transparent 70%),
    /* faint vertical sheen */
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 60%);
}

/* Keep stacking sane: header/main/foot above the bg */
body{ position: relative; }
.site-header, main, footer{ position: relative; z-index: 1; }

/* Slightly toned down on small screens */
@media (max-width:640px){
  .site-bg{ filter: blur(56px); }
}


/* Keep stacking sane: header/main above the bg */
body{ position: relative; }
.site-header, main, footer{ position: relative; z-index: 1; }

/* Slightly lighter on small screens so it doesn�t shout */
@media (max-width:640px){
  .site-bg{ opacity:.35; filter: blur(36px); }
}


/* ===== Responsive helpers (needed for mobile nav) ===== */
@media (min-width:768px){
  .md\:hidden{ display:none !important; }
  .md\:block{ display:block !important; }
  .md\:flex{ display:flex !important; } /* you already had md:flex earlier; this hardens it */
}

/* Ensure header can anchor an absolute mobile panel */
.site-header{ position: relative; z-index: 20; }

/* Hamburger button */
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:999px;
  border:1px solid var(--border);
  background:var(--pill-bg);
  transition: background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.nav-toggle:hover{ background:var(--pill-bg-hover); border-color:rgba(255,255,255,.16); transform:translateY(-1px); }
.nav-toggle .bars{ position:relative; width:18px; height:12px; }
.nav-toggle .bars::before,
.nav-toggle .bars::after,
.nav-toggle .bar{
  content:""; position:absolute; left:0; right:0; height:2px; border-radius:2px; background:#e7e7f0;
}
.nav-toggle .bar{ top:5px; }
.nav-toggle .bars::before{ top:0; }
.nav-toggle .bars::after{ bottom:0; }

/* Mobile menu panel */
.mobile-nav{
  position:absolute; left:0; right:0; top:100%;
  margin-top:.5rem;
  padding:.75rem;
  border-radius:16px;
  background:rgba(15,17,23,.92);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(89,208,255,.10), 0 10px 24px rgba(197,91,255,.08);
}
.mobile-nav a{
  display:block; padding:.75rem .9rem; border-radius:12px;
  color:#e7e7f0; text-decoration:none; border:1px solid transparent;
}
.mobile-nav a:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.10);
}

/* Width helpers we forgot (used by login/register pages) */
.max-w-sm{ max-width: 24rem; }   /* 384px */
.max-w-md{ max-width: 28rem; }   /* 448px */
.max-w-lg{ max-width: 32rem; }   /* 512px */

/* Auth card polish */
.auth-card{
  margin: 0 auto;
  padding: 1.25rem;
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  box-shadow: 0 14px 36px rgba(10,14,25,.35);
}
@media (min-width:640px){
  .auth-card{ padding: 1.75rem; border-radius: 20px; }
}

/* tighten only on large screens */
@media (min-width:1024px){
  footer { margin-top: 3rem !important; }                 /* was mt-16 via class */
  footer .footer-wrap{
    max-width: 72rem;                                     /* = 1152px */
    margin: 0 auto;
    padding: 2rem 1rem;                                   /* was py-12 */
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;                   /* 3 columns */
    gap: 1.5rem;                                          /* tighter */
  }
  footer .brand-blurb{ max-width: 46ch; }                 /* limit line length */
  footer .footer-wrap .text-sm{ font-size: .92rem; }      /* slightly smaller */
  footer .footer-wrap ul.space-y-2 > * + *{ margin-top: .35rem; } /* tighter list */
}

/* keep mobile/tablet nice and roomy */
@media (max-width:1023.98px){
  footer .footer-wrap{ padding: 2.25rem 1rem; gap: 2rem; }
}