/* =====================================================================
   alt108 website styles
   ---------------------------------------------------------------------
   HOW THIS FILE IS ORGANISED (top to bottom):
     1. Colours and fonts   <- change the whole look from here
     2. Basics (page, text, links, buttons)
     3. Header and menu
     4. One block per section of the main page (hero, demos, ...)
     5. Demo pages
     6. Phone and tablet adjustments (at the very bottom)
   ===================================================================== */


/* ---------- 1. COLOURS AND FONTS ----------
   These are "variables". Change a colour here and it changes
   everywhere it is used on the site. */
:root {
  --navy: #1B2A41;        /* dark background (hero, header, footer) */
  --navy-deep: #131F31;   /* slightly darker navy for contrast */
  --amber: #F2A541;       /* highlight colour: buttons, labels */
  --teal: #2A9D8F;        /* second accent: ticks, small details */
  --paper: #F7F7F5;       /* light page background */
  --white: #FFFFFF;
  --ink: #2B2B2B;         /* main text colour */
  --soft: #5E6670;        /* grey text for smaller notes */
  --line: #E2E0DA;        /* thin borders */

  --font-head: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --radius: 10px;         /* how rounded the corners of boxes are */
  --max: 1120px;          /* maximum width of the content */
}


/* ---------- 2. BASICS ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }               /* menu links glide down the page */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 var(--font-body);
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--teal); }

/* .wrap keeps content centred and not too wide */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* Every main-page section gets the same breathing room */
section { padding: 80px 0; scroll-margin-top: 70px; }
section.alt { background: var(--white); }

/* Small uppercase label above headings, e.g. "AI-ASSISTED WEB APPS" */
.label {
  display: inline-block;
  font: 600 .78rem var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 14px;
}
.lead { font-size: 1.15rem; color: var(--soft); max-width: 720px; }
.note { font-size: .9rem; color: var(--soft); }

/* Buttons */
.btn {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 8px;
  font: 600 1rem var(--font-body);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--amber); color: var(--navy); }
.btn-primary:hover { background: #f5b65f; }
.btn-ghost { border-color: rgba(255,255,255,.4); color: var(--white); }
.btn-ghost:hover { border-color: var(--white); }
.btn-dark { background: var(--navy); color: var(--white); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }


/* ---------- 3. HEADER AND MENU ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { font: 700 1.5rem var(--font-head); color: var(--white); text-decoration: none; }
.logo span { color: var(--amber); }               /* "108" in amber */
.menu { display: flex; gap: 24px; align-items: center; }
.menu a { color: #D5DAE1; text-decoration: none; font-size: .95rem; }
.menu a:hover { color: var(--white); }
.menu .btn { padding: 8px 16px; font-size: .9rem; color: var(--navy); }
.menu-toggle { display: none; background: none; border: 0; color: var(--white); font-size: 1.6rem; cursor: pointer; }


/* ---------- 4. MAIN PAGE SECTIONS ---------- */

/* Hero (the first screen) */
.hero { background: var(--navy); color: var(--white); padding: 100px 0 110px; }
.hero h1 { max-width: 900px; }
.hero h1 em { font-style: normal; color: var(--amber); }
.hero .lead { color: #C5CCD6; margin-bottom: 32px; }

/* Demo cards */
.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 36px;
}
.demo-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  display: flex; flex-direction: column;
}
.demo-card.flagship { border: 2px solid var(--amber); }
.demo-card .tag {
  align-self: flex-start;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: #FDF0DC; color: #8A5A12; padding: 3px 9px; border-radius: 99px; margin-bottom: 12px;
}
.demo-card p { font-size: .95rem; }
.demo-card .btn { margin-top: auto; align-self: flex-start; padding: 10px 16px; font-size: .92rem; }
.demo-card b { color: var(--navy); }
.coming-soon {
  margin-top: 20px; padding: 18px 22px;
  border: 1px dashed #C9C5BA; border-radius: var(--radius);
  font-size: .95rem; color: var(--soft);
}

/* "Where the time goes": four numbered boxes */
.four {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin: 30px 0; padding: 0; list-style: none; counter-reset: four;
}
.four li {
  background: var(--paper); border-radius: var(--radius); padding: 22px;
  counter-increment: four;
}
.four li::before {
  content: counter(four);
  display: block; font: 700 2rem var(--font-head); color: var(--amber); margin-bottom: 6px;
}
.four b { display: block; font-family: var(--font-head); margin-bottom: 4px; }

/* AI table */
.table-scroll { overflow-x: auto; margin: 28px 0; }  /* lets the table scroll sideways on phones */
.ai-table { width: 100%; border-collapse: collapse; background: var(--white); min-width: 640px; }
.ai-table th { background: var(--navy); color: var(--white); text-align: left; padding: 12px 14px; font-size: .9rem; }
.ai-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: .95rem; vertical-align: top; }
.ai-table td:nth-child(3) { font-weight: 600; color: var(--teal); white-space: nowrap; }
.pullquote {
  font: 600 1.3rem/1.4 var(--font-head); color: var(--navy);
  border-left: 4px solid var(--amber); padding-left: 18px; max-width: 760px;
}

/* "What you actually get": outcome chips */
.outcomes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding: 0; list-style: none; }
.outcomes li {
  background: var(--white); border: 1px solid var(--line); border-radius: 99px;
  padding: 8px 16px; font-weight: 500;
}
.outcomes li::before { content: "✓ "; color: var(--teal); font-weight: 700; }

/* "How it works": three steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 32px 0; }
.step { background: var(--paper); border-radius: var(--radius); padding: 26px; }
.step .num { font: 700 .85rem var(--font-body); color: var(--amber); letter-spacing: .08em; }
.guarantee {
  display: flex; gap: 16px; align-items: flex-start;
  background: #E6F4F1; border: 1px solid #BFE3DC; border-radius: var(--radius); padding: 20px 24px;
}
.guarantee .icon { font-size: 1.8rem; line-height: 1; }

/* About + founder card */
.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.pronounce { font-style: italic; color: var(--soft); }
.promise-list { padding: 0; list-style: none; margin: 24px 0; }
.promise-list li { border-left: 3px solid var(--navy); padding: 4px 0 4px 14px; margin-bottom: 14px; }
.hobby { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; margin-top: 28px; }
.hobby img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; }

.founder-card {
  background: var(--white); border-radius: 16px; padding: 22px;
  box-shadow: 0 10px 30px rgba(27,42,65,.12);
  position: sticky; top: 90px;
}
.founder-card .badge {
  display: inline-block; font-size: .75rem; font-weight: 600;
  border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; margin-bottom: 14px;
}
.founder-card .badge::before { content: "● "; color: var(--teal); }
.founder-card img { border-radius: 12px; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; }
.founder-card h3 { margin: 16px 0 2px; }
.founder-card .quote {
  font-style: italic; border-left: 3px solid var(--amber); padding-left: 12px; margin: 14px 0;
}
.founder-card .direct {
  display: block; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px;
  text-decoration: none; color: var(--ink);
}
.founder-card .direct small { display: block; font-size: .7rem; letter-spacing: .08em; color: var(--soft); }
.founder-card .direct strong { font-size: 1.15rem; }

/* Testimonials (switched off for now, see snippets/testimonials.html) */
.testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 28px; }
.testimonial { background: var(--white); border-radius: var(--radius); padding: 24px; border: 1px solid var(--line); }
.testimonial blockquote { margin: 0 0 12px; font-style: italic; }
.testimonial .who { font-size: .9rem; color: var(--soft); }

/* FAQ: <details> opens and closes without any JavaScript */
.faq { max-width: 820px; margin-top: 28px; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; }
.faq summary {
  cursor: pointer; padding: 18px 22px; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; color: var(--amber); line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details[open] { border-color: var(--amber); }
.faq details p { padding: 0 22px 18px; margin: 0; color: var(--soft); }

/* Contact form */
.contact { background: var(--navy); color: var(--white); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: start; }
.contact .lead { color: #C5CCD6; }
.contact a { color: var(--amber); }
.form-card { background: var(--white); color: var(--ink); border-radius: 16px; padding: 28px; }
.form-card label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 14px 0 6px; }
.form-card label .req { color: var(--amber); }
.form-card input, .form-card select, .form-card textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #D6D2C7; border-radius: 8px;
  font: inherit; background: #FFFDF8;
}
.form-card textarea { min-height: 120px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-card .btn { width: 100%; margin-top: 20px; }
.form-status { margin-top: 12px; font-size: .95rem; }

/* Footer */
.site-footer { background: var(--navy-deep); color: #9AA4B2; padding: 36px 0; font-size: .9rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
.site-footer a { color: #D5DAE1; }


/* ---------- 5. DEMO PAGES ---------- */
.demo-hero { background: var(--navy); color: var(--white); padding: 64px 0 56px; }
.demo-hero .lead { color: #C5CCD6; }
.crumb { font-size: .9rem; margin-bottom: 18px; }
.crumb a { color: #C5CCD6; }

/* Split screen: the app on the left, the live data on the right */
.split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-top: 24px; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.panel-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 14px; background: #EEECE6; font-size: .85rem; font-weight: 600;
}
.panel-head a { font-weight: 500; }
.panel iframe { width: 100%; height: 680px; border: 0; display: block; }
.placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 260px; padding: 30px; color: var(--soft); background: #FAF9F6;
}
.video-box { aspect-ratio: 16 / 9; max-width: 820px; margin-top: 20px; }
.video-box iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 24px; }
.fact { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.built-with { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.built-with li { background: #EEECE6; border-radius: 6px; padding: 4px 10px; font-size: .88rem; }
.cta-band { background: var(--white); text-align: center; }
.cta-band .btn-row { justify-content: center; }


/* ---------- 6. PHONE AND TABLET ADJUSTMENTS ----------
   Everything below only applies on narrower screens. */
@media (max-width: 900px) {
  .about-grid, .contact-grid, .split { grid-template-columns: 1fr; }
  .founder-card { position: static; max-width: 380px; }
  .panel iframe { height: 600px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  section { padding: 56px 0; }
  .hero { padding: 64px 0 72px; }
  .menu-toggle { display: block; }
  /* the menu folds away and drops down when ☰ is tapped */
  .menu {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--navy); padding: 8px 20px 18px;
  }
  .menu.open { display: flex; }
  .menu a { padding: 10px 0; }
  .form-row { grid-template-columns: 1fr; }
  .hobby { grid-template-columns: 1fr; }
}