/* ===========================================================================
   Noel Cof — dark personal-brand system
   Dark charcoal surfaces, white headings, grey body copy, and a single
   electric-blue accent. The gradient is a restrained two-stop blue used only
   on primary actions and small marks — never as decoration.
   =========================================================================== */

:root {
  --bg:        #08090B;
  --surface:   #0F1114;
  --surface-2: #15181C;
  --white:     #FFFFFF;
  --body:      #ADB2BA;
  --faint:     #6B7280;
  --line:      rgba(255, 255, 255, 0.09);
  --line-hi:   rgba(255, 255, 255, 0.17);

  /* one accent, two shades — that is the whole colour system */
  --blue:      #2E90FF;
  --blue-soft: #5FAEFF;
  --grad: linear-gradient(100deg, #2E90FF 0%, #5FAEFF 100%);

  --ok:   #3DD68C;
  --bad:  #FF6B6B;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 180ms var(--ease);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--body);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 40px; }
.narrow { max-width: 820px; }
/* centred section intro — heading block sits in the middle, content below */
.center { text-align: center; max-width: 640px; margin: 0 auto; }
.center .lede { margin-left: auto; margin-right: auto; }

h1, h2, h3 { color: var(--white); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
h1 { font-size: clamp(30px, 3.7vw, 45px); }
h2 {
  margin-bottom: 18px;
  /* same treatment as the hero h1 — Anton, uppercase, tight tracking —
     so every section headline reads as one consistent brand voice.
     Sized a step below h1 so the hero still reads as the single most
     prominent thing on the page, not competing with repeated section
     headers. */
  font-family: 'Anton', 'Inter', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  font-size: clamp(29px, 3.6vw, 41px);  /* +20% */
}
h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
p { color: var(--body); }
strong { color: var(--white); font-weight: 600; }
a { color: var(--blue); }

.grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

section { padding: 104px 0; }
section + section { border-top: 1px solid var(--line); }
.eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  margin-bottom: 14px; color: var(--blue);
}
.lede { font-size: 18px; max-width: 46ch; }

/* ---------- nav ---------- */
header.site {
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40;
  background: rgba(8, 9, 11, 0.9); backdrop-filter: blur(12px);
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 74px; }
/* text wordmark — no icon */
.brand {
  color: var(--white); font-weight: 700; font-size: 19px;
  letter-spacing: -0.02em; text-decoration: none;
}
header.site nav { display: flex; align-items: center; gap: 28px; }
header.site nav a:not(.btn) {
  color: var(--body); text-decoration: none; font-size: 15px; font-weight: 500;
  transition: color var(--fast);
}
header.site nav a:not(.btn):hover { color: var(--white); }

/* hamburger — only shown on small screens */
.navtoggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; padding: 9px 8px; flex-direction: column;
  justify-content: space-between;
}
.navtoggle span {
  display: block; height: 2px; width: 100%; background: var(--white);
  border-radius: 2px; transition: transform var(--fast), opacity var(--fast);
}
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-size: 15px; font-weight: 600;
  padding: 13px 26px; border-radius: 10px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; color: var(--white);
  transition: transform var(--fast), opacity var(--fast), border-color var(--fast), background var(--fast);
}
.btn-grad { background: var(--grad); }
.btn-grad:hover { transform: translateY(-1px); opacity: .93; }
.btn-quiet { background: transparent; border-color: var(--line-hi); }
.btn-quiet:hover { border-color: var(--white); }
/* WhatsApp keeps its recognisable icon, but the button itself follows the
   site's blue language — bright WhatsApp green fights the palette */
.btn-wa {
  background: rgba(46, 144, 255, 0.10);
  border-color: rgba(46, 144, 255, 0.42);
  color: var(--white);
}
.btn-wa:hover {
  background: rgba(46, 144, 255, 0.18);
  border-color: var(--blue); transform: translateY(-1px);
}
.btn-wa svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--blue); }
.btn[disabled] { opacity: .5; cursor: default; transform: none; }
.btn-sm { padding: 10px 18px; font-size: 14px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 0; border-bottom: 1px solid var(--line); }
/* Two drifting blue fields behind the headline. They sit on separate layers
   with different durations, so the two never line up the same way twice and
   the movement reads as organic rather than as a loop.
   The inset is negative so the gradients are already oversized — they can
   drift and scale without their soft edges ever entering the frame. */
.hero::before, .hero::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none; z-index: 0;
  /* transform-only animation, so this stays on the GPU and never triggers
     layout — the hero can animate continuously without costing scroll smoothness */
  will-change: transform;
}
.hero::before {
  background:
    radial-gradient(38% 42% at 24% 26%, rgba(46, 144, 255, 0.20), transparent 70%),
    radial-gradient(32% 38% at 76% 70%, rgba(95, 174, 255, 0.13), transparent 72%);
  animation: heroDriftA 26s ease-in-out infinite alternate;
}
.hero::after {
  background:
    radial-gradient(30% 34% at 70% 16%, rgba(46, 144, 255, 0.13), transparent 70%),
    radial-gradient(34% 40% at 14% 84%, rgba(95, 174, 255, 0.10), transparent 72%);
  animation: heroDriftB 34s ease-in-out infinite alternate;
}
@keyframes heroDriftA {
  from { transform: translate3d(-3%, -2%, 0) scale(1);    }
  to   { transform: translate3d( 4%,  3%, 0) scale(1.14); }
}
@keyframes heroDriftB {
  from { transform: translate3d( 3%,  2%, 0) scale(1.10); }
  to   { transform: translate3d(-4%, -3%, 0) scale(1);    }
}
/* Anyone who has asked their system to reduce motion gets the same colour
   composition, held still. */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
}

/* Background video, sitting above the drifting glow and below the text. */
.hero-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-bg video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Scrim. The clip is a mid-navy, which is far too light to put white type on
   directly — this drops it to roughly the page background at the centre while
   leaving the edges brighter, so the movement still reads. */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(62% 64% at 50% 48%, rgba(8, 9, 11, 0.74), rgba(8, 9, 11, 0.34) 72%),
    linear-gradient(180deg, rgba(8, 9, 11, 0.42), rgba(8, 9, 11, 0.12) 42%, rgba(8, 9, 11, 0.68));
}
.hero .wrap {
  position: relative; z-index: 2;
  /* Single column since the hero figure was removed. The inner block is
     width-capped rather than full-bleed: headline lines that run the whole
     page width are hard to track back to the start of the next line. */
  display: flex; align-items: center;
  /* Tied to viewport height so the hero fills most of the first screen on any
     display, with floors and ceilings so it never collapses on a laptop or
     runs absurdly tall on a big monitor. */
  min-height: clamp(560px, 80vh, 780px);
  /* breathing room under the CTA so it never sits flush against the
     marquee border below */
  padding-top: 54px; padding-bottom: 66px;
}
/* Centred rather than left-aligned. With the figure gone there is nothing to
   balance a left-hand column against, so text pinned left just leaves the
   right half empty — centring makes the full width read as intentional. */
.hero .wrap { justify-content: center; }
.hero .wrap > div { max-width: 880px; text-align: center; }
/* No width cap on the headline — each of its two lines is one sentence and
   should stay on one line. Capping it strands single words on their own row. */
.hero .hero-tagline { max-width: 52ch; margin-left: auto; margin-right: auto; }
.hero .actions { justify-content: center; }
/* The four deliverables as one centred row. Wraps to two rows on narrow
   screens rather than stacking into a tall list, which would push the
   buttons below the fold on a phone. */
.hero .checks {
  list-style: none; margin: 26px 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px;
}
.hero .checks li {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; color: var(--body);
}
.hero .checks .tick {
  width: 23px; height: 23px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(46, 144, 255, .5); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.hero h1 {
  margin-bottom: 6px;
  text-transform: uppercase;
  /* Anton for the headline only — Inter stays for body/UI everywhere else.
     Anton is a display font, already dense and bold by design, so it
     needs LESS extra tracking than a grotesk like Inter would in caps —
     tight/zero letter-spacing is correct here, not a compromise. */
  font-family: 'Anton', 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 5.1vw, 66px);
  letter-spacing: 0.005em;
}
.hero h1 .line2 { display: block; }
/* supporting tagline — carries the pain point, sized well below the h1 so
   the headline stays the primary message */
.hero-tagline {
  font-size: 17px; max-width: 44ch; margin-top: 18px; line-height: 1.6;
  color: var(--faint);
}
.hero-tagline strong { color: var(--body); font-weight: 600; }
.hero .actions { margin-top: 38px; display: flex; gap: 13px; flex-wrap: wrap; align-items: center; }
.hero .note { font-size: 14px; color: var(--faint); margin-top: 18px; }

/* ---------- tools marquee ---------- */
.marquee {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 30px 0; overflow: hidden; position: relative;
  /* fade both ends so items enter and leave instead of being chopped */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
/* Duration is tied to the item spacing below — widening the gaps lengthens the
   track, so the timing goes up with it to keep the scroll speed unchanged. */
.marquee-track { display: flex; align-items: center; width: max-content; animation: slide 52s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.m-item {
  color: var(--body); font-size: 15px; font-weight: 500; white-space: nowrap;
  display: flex; align-items: center; gap: 11px; letter-spacing: -0.01em;
}
/* logo sits next to the name; if the file is missing the <img> removes
   itself and the name alone carries the item */
.m-item img {
  height: 27px; width: auto; max-width: 140px; object-fit: contain;
  opacity: .85; transition: opacity var(--fast);
}
.marquee:hover .m-item img { opacity: 1; }
/* gradient dot separating each item */
.m-item::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--grad); flex-shrink: 0; margin: 0 62px 0 44px;
}

/* ---------- portfolio reels ---------- */
.reels { margin-top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.reel { display: flex; flex-direction: column; gap: 14px; }
.reel video {
  width: 100%; aspect-ratio: 9/16; display: block; background: #000;
  border-radius: 16px; border: 1px solid var(--line);
  transition: border-color var(--fast), transform var(--fast);
}
.reel:hover video { border-color: var(--line-hi); transform: translateY(-3px); }
.reel figcaption { font-size: 14.5px; color: var(--faint); text-align: center; }

/* ---------- what's included ---------- */
.incl {
  margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.incl-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 24px;
  transition: border-color var(--fast), background var(--fast), transform var(--fast);
}
.incl-item:hover {
  border-color: var(--line-hi); background: var(--surface-2); transform: translateY(-3px);
}
/* the last item spans the full row so the grid ends flush */
.incl-item.wide {
  grid-column: 1 / -1;
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
.incl-item.wide .ico { margin-left: auto; margin-right: auto; }
.incl-item .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 16px;
  border: 1px solid var(--line); background: var(--bg); color: var(--blue);
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.incl-item .ico svg { width: 20px; height: 20px; }
.incl-item:hover .ico { background: var(--grad); border-color: transparent; color: #fff; }
.incl-item strong { display: block; font-size: 16.5px; margin-bottom: 5px; }
.incl-item p { font-size: 15px; }

/* ---------- motion ---------- */
/* No scroll-reveal here on purpose. Any fade-in that starts at opacity 0
   can strand content invisible if the motion doesn't run, and this page's
   job is converting visitors — the motion below never hides anything. */

/* slow drift across the accent gradient so it feels alive, not static */
.grad, .btn-grad {
  background-size: 200% 100%;
  animation: drift 9s ease-in-out infinite alternate;
}
@keyframes drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .grad, .btn-grad { animation: none; }
}

/* ---------- steps ---------- */
.timeline {
  margin-top: 52px; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.timeline::before {
  content: ""; position: absolute; top: 26px; left: 16.6%; right: 16.6%;
  height: 2px; background: var(--line-hi); z-index: 0;
}
.tl-item { position: relative; z-index: 1; text-align: center; }
.tl-node {
  position: relative; z-index: 2; width: 52px; height: 52px; margin: 0 auto 20px;
  border-radius: 50%; background: var(--grad);
  display: flex; align-items: center; justify-content: center;
}
.tl-node span { color: #fff; font-weight: 700; font-size: 18px; }
.tl-item h3 { margin-bottom: 9px; }
.tl-item p { font-size: 15.5px; }

/* ---------- pricing ---------- */
.plans { margin-top: 46px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plan {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 32px 28px; display: flex; flex-direction: column;
  transition: border-color var(--fast);
}
.plan:hover { border-color: var(--line-hi); }
.plan.pick { border-color: transparent; position: relative; background: var(--surface-2); }
.plan.pick::before {
  content: ""; position: absolute; inset: -1px; border-radius: 18px; padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.plan h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--body); margin-bottom: 14px; }
.plan .price { font-size: 40px; font-weight: 700; color: var(--white); letter-spacing: -0.04em; line-height: 1; }
.plan .price small { font-size: 14px; font-weight: 500; color: var(--faint); letter-spacing: 0; }
.plan ul { list-style: none; margin: 22px 0 26px; flex: 1; display: grid; gap: 9px; }
.plan li { font-size: 15px; color: var(--body); display: flex; gap: 10px; }
.plan li::before { content: "→"; color: var(--blue); flex-shrink: 0; }
.plan .tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 20px; margin-left: 8px;
  background: var(--grad); color: #fff; vertical-align: 2px;
}
.plan .btn { width: 100%; text-align: center; }
.founder {
  margin-top: 26px; border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 28px; background: var(--surface); font-size: 15.5px;
  max-width: 720px; margin-left: auto; margin-right: auto; text-align: center;
}
.founder strong { color: var(--blue); font-weight: 700; }

/* ---------- faq ---------- */
details { border-bottom: 1px solid var(--line); padding: 22px 0; }
summary {
  cursor: pointer; list-style: none; color: var(--white); font-weight: 500; font-size: 17px;
  display: flex; justify-content: space-between; gap: 20px; transition: color var(--fast);
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--faint); font-size: 20px; line-height: 1.2; }
summary:hover { color: var(--blue-soft); }
details[open] summary::after { content: "–"; color: var(--blue); }
details p { margin-top: 13px; font-size: 16px; max-width: 62ch; }
.faq-cta { margin-top: 34px; text-align: center; font-size: 15.5px; color: var(--faint); }
.faq-cta a { color: var(--blue); text-decoration: none; font-weight: 500; }
.faq-cta a:hover { text-decoration: underline; }

/* ---------- form ---------- */
.contact-actions { margin-top: 34px; display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }
.form { margin-top: 44px; display: grid; gap: 18px; max-width: 470px; margin-left: auto; margin-right: auto; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--body); }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 16px; padding: 13px 15px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  color: var(--white); transition: border-color var(--fast);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus { outline: none; border-color: rgba(46, 144, 255, .6); }
.field textarea { min-height: 96px; resize: vertical; }
.msg { font-size: 15px; min-height: 22px; }
.msg.ok { color: var(--ok); }
.msg.bad { color: var(--bad); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

footer.site { border-top: 1px solid var(--line); padding: 40px 0 56px; font-size: 14px; color: var(--faint); }
footer.site .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer.site a { color: var(--body); text-decoration: none; }
footer.site a:hover { color: var(--white); }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .hero .wrap { min-height: 0; padding-top: 56px; padding-bottom: 56px; }
  .hero .wrap > div { max-width: none; }
  /* No background video on phones — half a megabyte over cellular for
     decoration is not a fair trade. The drifting CSS glow underneath it
     carries the same look for free. */
  .hero-bg { display: none; }
  .timeline, .plans, .reels { grid-template-columns: 1fr; }
  .timeline::before { display: none; }
  .tl-item { text-align: left; padding-left: 68px; min-height: 8px; }
  .tl-node { margin: 0; position: absolute; left: 0; top: 0; }
  .tl-item:not(:last-child)::after {
    content: ""; position: absolute; left: 25px; top: 52px; bottom: -20px;
    width: 2px; background: var(--line-hi);
  }
  .incl { grid-template-columns: repeat(2, 1fr); }
  .reel video { max-height: 70vh; width: auto; margin: 0 auto; }

  /* nav collapses into a dropdown panel instead of vanishing */
  .navtoggle { display: flex; }
  header.site nav {
    display: none; position: absolute; top: 74px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 10px 40px 22px;
  }
  header.site nav.open { display: flex; }
  header.site nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); }
  header.site nav .btn { margin-top: 16px; }
}

@media (max-width: 620px) {
  .wrap { padding: 0 22px; }
  header.site nav { padding: 10px 22px 22px; }
  section { padding: 70px 0; }
  .incl { grid-template-columns: 1fr; }
  /* full-width, easy-to-tap primary actions */
  .hero .actions .btn, .contact-actions .btn { width: 100%; }
}