/* =========================================================
   ADK Digital — Clean Mobile‑First Stylesheet (from scratch)
   ========================================================= */

/* --------- Base tokens --------- */
:root{
  --bg: #0e1622;           /* page background */
  --panel: #131c29;        /* section panels / cards */
  --panel-2: #192437;      /* deeper panel */
  --border: #263349;       /* subtle borders */
  --text: #e6f0ff;         /* primary text */
  --muted: #a8b6cc;        /* secondary text */
  --brand-400:#3e8cd2;
  --brand-500:#2b5a8a;
  --brand-600:#214066;
  --ok:#2ecc71;
  --no:#e74c3c;
  --radius:12px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --container:1120px;
  --header-h:64px;
  --bullet:#55c5ff;
  --transition:200ms ease;
}

/* --------- Resets --------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Open Sans", Arial, sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:var(--brand-300, #6bb7ff); text-decoration:none; }
a:hover,a:focus{ opacity:.9; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:1.25rem; }
.center{ text-align:center; }

/* Focus visibility */
:focus-visible{ outline:3px solid var(--brand-400); outline-offset:2px; border-radius:6px; }

/* --------- Header & Nav --------- */
.header{
  position:sticky; top:0; z-index:50;
  background: rgba(11,22,36,.8);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header__container{
  height:var(--header-h);
  display:flex; align-items:center; gap:.75rem;
}

/* brand logo always visible */
.nav__logo{ height:30px; width:auto; display:block; }
.nav__link--brand{ display:inline-flex; align-items:center; }

.header__toggle{
  margin-left:auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:10px;
  color:var(--text);
}
.header__toggle i{ font-size:20px; }

/* nav list */
.header__nav{ flex:1; }
.nav__list{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  padding:0; margin:0; list-style:none;
}
.nav__link{
  display:inline-block; padding:.5rem .75rem; border-radius:10px;
  color:var(--text); font-weight:600;
}
.nav__link:hover,.nav__link:focus-visible{ background:rgba(255,255,255,.06); }

/* ---- Mobile (base) navigation behaviour ---- */
/* Show brand item inline; hide the rest until toggled */
.nav__item--brand{ margin-right:auto; }
.header__nav .nav__item:not(.nav__item--brand){ display:none; }

/* When active, present a dropdown panel */
.header__nav.header__nav--active{
  position:fixed; inset:var(--header-h) 0 auto 0;
  background:rgba(10,17,28,.98);
  border-top:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow);
  padding:1rem 1.25rem 1.25rem;
}
.header__nav.header__nav--active .nav__list{
  justify-content:flex-start; flex-direction:column; align-items:stretch; gap:.25rem;
}
.header__nav.header__nav--active .nav__item{ display:block; }
.header__nav.header__nav--active .nav__item--brand{ display:none; } /* brand already visible in header */

/* Hide the toggle and show full nav at ≥768px */
@media (min-width:768px){
  .header__toggle{ display:none; }
  .header__nav{ position:static; }
  .nav__list{ justify-content:center; gap:1.25rem; }
  .header__nav .nav__item{ display:block; }
  .header__nav .nav__item--brand{ margin-right:0; }
}

/* --------- Hero --------- */
.hero{
  background:
    radial-gradient(1200px 600px at 20% 10%, #0b1524 0%, transparent 60%),
    radial-gradient(900px 500px at 80% 0%, #0f1e31 0%, transparent 70%),
    linear-gradient(180deg,#0b1524 0%, #0f1a2b 40%, #0e1622 100%);
  overflow:hidden;
}
.hero__container{
  min-height: calc(60vh - var(--header-h));
  display:grid; place-items:center; text-align:center; padding-block: clamp(48px, 12vw, 120px);
}
/* remove default h1 spacing so you control it */
.hero__title {
  margin: 0;            /* kills default top/bottom margins */
  line-height: 0;       /* avoids extra inline gap around the img */
}

/* keep your existing logo styles, add block + top nudge */
.hero__logo{
  display: block;       /* ensures margin auto centers the img */
  width: clamp(180px, 60vw, 460px);
  margin: -5vh auto 0; /* move it up by ~5% of viewport height */
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.45));
}

.hero__subtitle{ color:var(--muted); margin:.25rem 0; }
.hero .button{ margin-top:1rem; }

/* center the social row inside the hero */
.hero .footer__social {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* --------- Generic Sections --------- */
.section-heading{ font-size:clamp(1.35rem, 1.1rem + 1.5vw, 2rem); margin:0 0 .5rem; }
.section-intro{ color:var(--muted); max-width:70ch; margin:0 auto 1.25rem; }
section{ padding-block: clamp(48px, 8vw, 96px); }
.card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
}

/* --------- Buttons --------- */
.button{
  --bg1: var(--brand-500); --bg2: var(--brand-600);
  display:inline-block; padding:.75rem 1.1rem; border-radius:12px;
  color:#fff; font-weight:700; text-align:center;
  background: linear-gradient(180deg,var(--bg1),var(--bg2));
  box-shadow:0 6px 14px rgba(0,0,0,.35);
  transition: transform var(--transition), filter var(--transition), box-shadow var(--transition);
}
.button:hover{ transform: translateY(-1px); filter:saturate(1.05); }
.button:active{ transform: translateY(0); }

/* --------- Services Grid --------- */
.services__grid{
  display:grid; gap:1rem; margin-top:1rem;
  grid-template-columns: 1fr;
}
.services__item{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem; text-align:center;
  box-shadow:var(--shadow);
}
.services__icon{ font-size:26px; margin-bottom:.25rem; color:var(--brand-400); }
.services__item-title{ margin:.25rem 0 .25rem; font-size:1.05rem; }
.services__item-description{ color:var(--muted); font-size:.975rem; }

@media (min-width:768px){
  .services__grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px){
  .services__grid{ grid-template-columns: repeat(4,minmax(0,1fr)); }
}

/* --------- Plan / Comparison --------- */
.plan__title{ text-align:center; margin:2rem 0 1rem; }
.plan__summary{ color:var(--muted); max-width:75ch; margin:0 auto 1.25rem; }
.compare-table-wrap{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow);
}

/* Desktop table */
.compare-table{
  width:100%; border-collapse:collapse; min-width:720px;
}
.compare-table th,
.compare-table td{
  padding:.75rem .75rem; border-bottom:1px solid var(--border); vertical-align:top;
  text-align:left; color:var(--text);
}
.compare-table thead th{ font-weight:700; background:var(--panel-2); position:sticky; top:0; }
.compare-table i.fa-check{ color:var(--ok); }
.compare-table i.fa-times{ color:var(--no); }
.compare-note{ text-align:center; color:var(--muted); margin:.75rem 0 0; }

/* Scroll on narrow screens */
.compare-table-wrap{ overflow-x:auto; }
.compare-table{ border:0; }

/* --------- Portfolio/Grid --------- */
.portfolio__title{ text-align:center; margin-bottom:.5rem; }
.portfolio__intro{ color:var(--muted); max-width:70ch; margin:0 auto 1.25rem; }
.portfolio__grid{
  display:grid; gap:1rem; grid-template-columns:1fr;
}
.portfolio__item{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.portfolio__thumb-link{ display:block; }
.portfolio__image{ width:100%; height:240px; object-fit:cover; }
.portfolio__item-title{ font-size:1.15rem; margin:.75rem 1rem .25rem; }
.portfolio__item-description, .portfolio__item-testimonial{ color:var(--muted); margin:.25rem 1rem 1rem; }

@media (min-width:768px){
  .portfolio__grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px){
  .portfolio__grid{ grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* --------- About --------- */
.about__content{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow);
  max-width: 80ch; margin: 0 auto;
}
.about__bullets{ margin:.75rem 0 0 1rem; }
.about__bullets li{ margin:.35rem 0; }

/* --------- Contact / Forms --------- */
.contact__title{ margin-bottom:.5rem; }
.contact__intro{ color:var(--muted); max-width:70ch; margin:0 auto 1.25rem; }
.contact__form{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow);
  max-width:820px; margin:0 auto;
}
.form__group{ margin-bottom:1rem; }
.form__label{ display:block; margin-bottom:.35rem; font-weight:600; }
.form__input,.form__textarea{
  width:100%; padding:.75rem .9rem; color:var(--text);
  background:#0f1724; border:1px solid var(--border);
  border-radius:var(--radius-sm); transition:border-color var(--transition), box-shadow var(--transition);
}
.form__input:focus-visible,.form__textarea:focus-visible{
  border-color:var(--brand-400);
  box-shadow:0 0 0 3px rgba(62,140,210,.25);
}
.form__textarea{ min-height:160px; resize:none; }
.form__inline-options{
  display:flex; flex-wrap:wrap; gap:1rem 1.25rem; align-items:center;
}
.form__inline-options input{ width:18px; height:18px; }
.form__error{ color:#ffd166; font-size:.9rem; margin-top:.35rem; }
.button.form__submit{ width:100%; margin-top:.5rem; align-self: center; }

.hidden { display: none !important; }

@media (min-width:640px){
  .button.form__submit{ width:auto; }
}

/* --------- Footer --------- */
.footer{
  border-top:1px solid rgba(255,255,255,.06);
  background:#0b1220;
}
.footer__container{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding-block:1.25rem;
}
.footer__name{ color:var(--muted); }
.footer__social{ display:flex; gap:.75rem; }
.footer__social-link{
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; background:rgba(255,255,255,.06);
}
.footer__social-link:hover{ background:rgba(255,255,255,.12); }

/* --------- Helpers --------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --------- Media queries for larger typography --------- */
h1,h2,h3{ line-height:1.25; }
h1{ font-size:clamp(1.8rem, 1.2rem + 2.5vw, 3rem); }
h2{ font-size:clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
h3{ font-size:clamp(1.1rem, 1rem + .6vw, 1.3rem); }

/* --------- Motion preferences --------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}


/* === Tweaks based on feedback === */

/* === Hero bullets: desktop separators + mobile-leading bullets === */
.hero-bullets{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
}
.hero-bullets span{ white-space:nowrap; }

/* Desktop (wide): show donut separators between items */
@media (min-width: 769px){
  .hero-bullets span:not(:last-child)::after{
    content:"\25CE";           /* ◎ (Unicode U+25CE, bullseye) */
    display:inline-block;
    margin:0 .65rem;
    color: var(--bullet, #55c5ff); /* bright-but-soft blue */
    font-weight: 700;
    line-height: 1;
  }
}

/* Mobile (narrow): stack items, put a donut at the start of each line */
@media (max-width: 768px){
  .hero-bullets{
    display: block;            /* stop flexing, stack items */
  }
  .hero-bullets span{
    display: block;            /* each one forces a new line */
    margin-bottom: .35rem;     /* small vertical gap */
    text-align: center;        /* keeps them centered like desktop */
  }
  .hero-bullets span::before{
    content:"\25CE\00a0";      /* ◎ plus non-breaking space */
    color: var(--bullet, #55c5ff);
    font-weight: 700;
    line-height: 1;
  }
}



/* 1) Desktop: make hero subtitles bigger */
.hero__subtitle--main{ font-size: clamp(1.15rem, 0.8rem + 2.4vw, 2.1rem); }
.hero__subtitle--secondary{ font-size: clamp(1rem, 0.7rem + 1.4vw, 1.4rem); }

/* 2) Desktop: ensure nav items are visible (override mobile hide specificity) */
@media (min-width:768px){
  .header__nav .nav__item:not(.nav__item--brand){ display:block; }
}

/* 3) Mobile: show the full comparison table without horizontal scroll */
@media (max-width:480px){
  .compare-table-wrap{ overflow-x: visible; }
  .compare-table{ min-width: 0; table-layout: fixed; }
  .compare-table th, .compare-table td{
    width:25%;
    padding:.35rem .3rem;
    font-size: clamp(10px, 2.7vw, 12px);
    word-break: break-word;
  }
  .compare-table thead th{ position: static; }
}

/* 4) Footer: center all items/text */
.footer__info{ text-align:center; }


/* === Fix: keep header visible on mobile by pinning it === */
body{ padding-top: var(--header-h); }              /* prevent content from sliding under fixed header */
.header{ position: fixed; top:0; left:0; right:0; z-index: 1000; }

/* Ensure in-page anchors account for fixed header */
[id]{ scroll-margin-top: calc(var(--header-h) + 12px); }