/* =========================
   Helicon Nova — Under Construction
   ========================= */

/* 1) CSS Variables / Theme */
:root{
  /* Palette (provided) */
  --brand: #00c7a9;          /* teal */
  --accent: #6c63ff;         /* indigo */
  --ink: #1a2b5c;            /* navy/dark text */
  --bg: #ffffff;             /* white base */
  --surface: #f0f1f6;        /* light gray surface */
  --muted: #d4af37;          /* gold */

  /* Accessible derivations */
  /* Fallbacks for older browsers without color-mix */
  --ink-strong: #0f1d3d;
  --brand-strong: #0e9b87;
  --accent-strong: #4d44e6;

  /* Try to compute richer tones where supported */
  color-scheme: light;
}

@supports (color: color-mix(in oklab, black, white)){
  :root{
    --ink-strong: color-mix(in oklab, var(--ink) 85%, black);
    --brand-strong: color-mix(in oklab, var(--brand) 70%, black);
    --accent-strong: color-mix(in oklab, var(--accent) 70%, black);
  }
}

/* Globals */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.5;
  color: var(--ink);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img{max-width:100%;display:block}

/* Accessibility helpers */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); border:0;
}

.skip-link{
  position:absolute; left:-9999px; top:auto;
  background: var(--accent-strong); color:#fff; padding:.5rem .75rem; border-radius:.5rem;
}
.skip-link:focus{left:.5rem; top:.5rem; z-index:999}

/* Links */
a{color: var(--accent-strong); text-underline-offset: .2em}
a:hover{opacity:.9}
a:focus-visible{outline:3px solid var(--muted); outline-offset:3px}

/* Containers */
.container{width:min(1120px, 92vw); margin-inline:auto}

/* Brand Bar */
.brand-bar{
  position:sticky; top:0; z-index:10; background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.brand-bar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 4vw;
}
.brand-bar__logo img{height:150px; width:auto}
.brand-bar__nav ul{display:flex; gap:1.25rem; list-style:none; margin:0; padding:0}
.brand-bar__nav a{color: var(--ink); text-decoration:none; font-weight:600}
.brand-bar__nav a:hover{color: var(--accent-strong)}

/* Hero */
.hero{
  position:relative; overflow:hidden;

  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0; z-index:-3;
  background:
    radial-gradient(1200px 800px at 10% 10%, color-mix(in oklab, var(--brand) 30%, transparent), transparent 60%),
    radial-gradient(1000px 700px at 90% 20%, color-mix(in oklab, var(--accent) 25%, transparent), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--bg));
  animation: bgShift 16s ease-in-out infinite alternate;
}
.hero__noise{
  position:absolute; inset:-40px; z-index:-2; opacity:.07; mix-blend: multiply;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJhZGlhbEdyYWRpZW50IGlkPSJnIiBjeD0iNTAlIiBjeT0iNTAlIiByPSIxMDAiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmZiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2ZmZiIvPjwvcmFkaWFsR3JhZGllbnQ+PHJlY3Qgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSJ1cmwoI2cpIi8+PGZpbHRlciBpZD0ibm9pc2UiPjxmZVR1cmJ1bGVuY2UgdHlwZT0icmZyQmFzZSIgYmFzZUZyZXF1ZW5jeT0iLjMiIG51bU9jdGF2ZXM9IjEiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMC4wNSIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZGRiIgZmlsdGVyPSJ1cmwoI25vaXNlKSIgb3BhY2l0eT0iLjciLz48L3N2Zz4=");
  background-size: 200px 200px;
}
.hero__particles::before,
.hero__particles::after{
  content:""; position:absolute; border-radius:999px; opacity:.18;
  width:10px; height:10px; background: var(--accent-strong);
  box-shadow:0 0 14px 4px color-mix(in oklab, var(--accent) 30%, transparent);
}
.hero__particles::before{ left:10%; top:30%; animation: float1 14s ease-in-out infinite}
.hero__particles::after{ right:12%; top:55%; background: var(--brand-strong); animation: float2 12s ease-in-out infinite}

@keyframes bgShift{
  0%{ transform: translateY(0)}
  100%{ transform: translateY(-2%)}
}
@keyframes float1{
  0%,100%{ transform: translate3d(0,0,0) scale(1)}
  50%{ transform: translate3d(8px,-12px,0) scale(1.2)}
}
@keyframes float2{
  0%,100%{ transform: translate3d(0,0,0) scale(1)}
  50%{ transform: translate3d(-10px,10px,0) scale(0.9)}
}

/* Hero content */
.hero__content{text-align:center}
.hero__title{
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height:1.15; letter-spacing:-0.015em;
  margin:0 0 1rem;
  color: var(--ink-strong);
  opacity:0; transform: translateY(12px);
  animation: riseIn .4s cubic-bezier(.2,.8,.2,1) .1s forwards;
}
.hero__sub{
  margin:.25rem auto 1.75rem;
  font-weight:600; color: var(--accent-strong);
}
@keyframes riseIn{
  to{opacity:1; transform:none}
}

/* CTA form */
.cta-form{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--surface) 60%, white);
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 14px;
  padding: .6rem;
  width:min(680px, 96%);
  margin-inline:auto;
}
.cta-form input[type="email"]{
  flex:1 1 220px; min-width:0;
  height: 46px;
  padding: .65rem .8rem;
  border-radius:10px; border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background:#fff; color:var(--ink);
  font-size:1rem;
}
.cta-form input[type="email"]:focus-visible{outline:3px solid var(--muted); outline-offset:2px}

.btn{
  position:relative; display:inline-flex; align-items:center; gap:.5rem;
  height:46px; padding: 0 1rem; border-radius:10px;
  font-weight:700; text-decoration:none; cursor:pointer; border:0;
  transition: transform .08s ease, box-shadow .2s ease;
  will-change: transform;
}
.btn--primary{
  background: var(--ink); color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.btn--primary:hover{ transform: translateY(-1px)}
.btn--primary:active{ transform: translateY(1px)}
.btn--primary::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.2) 40%, transparent 60%);
  background-size: 200% 100%; background-position: -120% 0;
  transition: background-position .7s ease;
}
.btn--primary:hover::before{ background-position: 120% 0}
.btn__icon{transform: translateX(0); transition: transform .2s ease}
.btn:hover .btn__icon{ transform: translateX(2px)}

/* Form messages */
.form-msg{margin:.25rem 0 0; min-height:1.25rem;color:green;}
.form-disclaimer{font-size:.875rem; margin:.25rem 0 0; opacity:.8;}

/* Values section */
.values{padding: clamp(2.5rem, 6vw, 4rem) 0}
.values__grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap: clamp(1rem, 2.4vw, 1.6rem);
}
@media (max-width: 820px){
  .values__grid{ grid-template-columns: 1fr}
}
.value-card{
  background: #fff; border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius:16px; padding:1.25rem; box-shadow:0 8px 28px rgba(0,0,0,.06);
  transform: translateY(8px); opacity:0;
}
.value-card__icon{color: var(--brand-strong); margin-bottom:.25rem}
.value-card__title{margin:.25rem 0 .25rem; font-size:1.05rem}
.value-card__text{margin:0; color: color-mix(in srgb, var(--ink) 80%, #000)}

.reveal-in{ transform:none!important; opacity:1!important; transition: transform .5s ease, opacity .5s ease}

/* Updates */
.updates{padding: 1.5rem 0}
.updates__line{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .75rem 1rem; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, white);
  border:1px dashed color-mix(in srgb, var(--ink) 18%, transparent);
  font-weight:600;
}
.chip{
  display:inline-block; padding:.2rem .6rem; border-radius:999px; background: var(--brand-strong); color:#fff; font-size:.875rem
}

/* Footer */
.site-footer{ padding: 2rem 0; border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent); background: #fff}
.site-footer__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem}
.social{ list-style:none; margin:0; padding:0; display:flex; gap:.75rem}
.social__link{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; background: var(--surface); color: var(--ink)}
.social__link:hover{ background: color-mix(in srgb, var(--accent) 20%, var(--surface))}
.contact{font-style:normal}
.legal{ list-style:none; display:flex; gap:1rem; margin:0; padding:0}

/* Focus styles for interactive controls */
button:focus-visible, .social__link:focus-visible, .brand-bar__nav a:focus-visible{
  outline:3px solid var(--muted); outline-offset:3px
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .hero__particles, .hero__bg, .hero__noise{ display:none!important}
}

/* Print — single clean page */
@media print{
  .brand-bar, .hero__bg, .hero__noise, .hero__particles, .social, .legal, .form-disclaimer{ display:none!important}
  body{ color:#000; background:#fff}
  .container{ width:100%; margin:0; padding:0 10mm}
  .values__grid{ grid-template-columns: 1fr 1fr; gap:10mm}
  .cta-form{ border:1px solid #000 }
}


img.logo-crop--pct {
  /* tweak these */
  --crop-top: 12px;
  --crop-bottom: 12px;

  clip-path: inset(var(--crop-top) 0 var(--crop-bottom) 0);
}

/* ==== PATCH: add to the end of styles.css ==== */

/* Remove old brand-bar logo and keep minimal text link */
.brand-bar__home{
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .2px;
}
.brand-bar__logo{ display:none !important; }  /* if old logo node still exists */

/* Hero two-column layout */
.hero__grid{
  display:grid;
  grid-template-columns: 1fr;
  align-items:center;
  gap: clamp(1rem, 4vw, 3rem);
  text-align:left;
}
.hero__left{ max-width: 720px; margin-inline: auto; }
.hero__right{
  display:flex; align-items:center; justify-content:center;
}
@media (min-width: 880px){
  .hero__grid{
    grid-template-columns: 1.1fr .9fr;
  }
  .hero__left{ margin-inline: 0; }
}

/* Title align left in grid */
.hero__title{ text-align: left; }
.hero__sub{ text-align: left; }

/* Big logo sizing (crisp, responsive) */
.hero__logo{
  max-width: clamp(260px, 44vw, 620px);
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.08));
  /* Optional gentle crop from top/bottom if needed: */
  /* clip-path: inset(4% 0 4% 0); */
}

/* Center the CTA group nicely on small screens */
@media (max-width: 879px){
  .cta-form{ margin-inline:auto }
  .hero__right{ margin-top: .5rem }
}