/* Base */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{ overflow-x: hidden; }

.skip-link{
  position: absolute;
  left: -999px;
  top: 10px;
  z-index: 9999;
  background: rgba(234,240,255,.10);
  border: 1px solid rgba(234,240,255,.18);
  color: var(--c-text);
  padding: .5rem .75rem;
  border-radius: 10px;
}
.skip-link:focus{ left: 10px; }

.paper-grain{
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background:
    radial-gradient(circle at 20% 30%, rgba(234,240,255,.08), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(234,240,255,.06), transparent 45%),
    repeating-linear-gradient(0deg, rgba(234,240,255,.015), rgba(234,240,255,.015) 1px, transparent 1px, transparent 6px);
  mix-blend-mode: overlay;
  z-index: 0;
}

.kintsugi{
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  opacity: .8;
  filter: blur(0.1px);
  background:
    radial-gradient(1400px 600px at 10% 12%, rgba(229,192,107,.10), transparent 55%),
    radial-gradient(1200px 520px at 86% 18%, rgba(229,192,107,.08), transparent 58%),
    linear-gradient(120deg, transparent 0 42%, rgba(229,192,107,.10) 45%, transparent 48%),
    linear-gradient(30deg, transparent 0 58%, rgba(229,192,107,.08) 62%, transparent 66%);
  mix-blend-mode: screen;
}
.kintsugi--a{ transform: rotate(-8deg); }
.kintsugi--b{ transform: rotate(11deg); opacity: .55; }

.halo{
  position: fixed;
  width: 820px;
  height: 820px;
  border-radius: 999px;
  filter: blur(46px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.halo--a{
  left: -260px;
  top: -260px;
  background: radial-gradient(circle at 30% 30%, rgba(109,226,255,.22), transparent 60%);
}
.halo--b{
  right: -280px;
  bottom: -320px;
  background: radial-gradient(circle at 30% 30%, rgba(255,106,162,.20), transparent 60%);
}

/* Brand */
.brand-mark{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 30%, rgba(109,226,255,.95), rgba(109,226,255,.15) 55%, transparent 56%),
    radial-gradient(circle at 70% 70%, rgba(255,106,162,.85), rgba(255,106,162,.12) 55%, transparent 56%),
    linear-gradient(135deg, rgba(229,192,107,.24), rgba(234,240,255,.06));
  border: 1px solid rgba(234,240,255,.16);
  box-shadow: var(--shadow-2);
}

/* Typo helpers */
.eyebrow{
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .78rem;
  color: rgba(234,240,255,.68);
}
.h1-ish{
  font-size: clamp(1.6rem, 2.1vw + 1rem, 2.6rem);
}

/* Sections */
.section-pad{
  position: relative;
  padding: 72px 0;
  z-index: 1;
}
.section-surface{
  background: var(--grad-surface);
  border-top: 1px solid rgba(234,240,255,.08);
  border-bottom: 1px solid rgba(234,240,255,.08);
}
.section-divider{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 120px;
  opacity: .95;
}

/* Hero */
.hero{
  position: relative;
  padding: 86px 0 44px;
  background: var(--grad-hero);
  z-index: 1;
}
.hero-cut{
  border-bottom: 1px solid rgba(234,240,255,.08);
}
.hero-title{
  text-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.hero-divider{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 120px;
  opacity: .95;
}

.hero-metrics{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.metric{
  border: 1px solid rgba(234,240,255,.12);
  background: rgba(14,20,38,.50);
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: var(--shadow-2);
}
.metric-k{
  font-weight: 700;
  font-size: .92rem;
}
.metric-v{
  color: rgba(234,240,255,.70);
  font-size: .84rem;
  margin-top: 2px;
}
@media (max-width: 991px){
  .hero-metrics{ grid-template-columns: 1fr; }
}

/* Hero panel */
.hero-panel{
  border-radius: var(--r-xl);
  border: 1px solid rgba(234,240,255,.14);
  background: rgba(14,20,38,.55);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.hero-panel-top{
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(234,240,255,.10);
  background: rgba(234,240,255,.03);
}
.pill{
  font-size: .78rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(109,226,255,.26);
  background: rgba(109,226,255,.10);
  color: rgba(234,240,255,.92);
  font-weight: 700;
}
.pill--ghost{
  border-color: rgba(234,240,255,.16);
  background: rgba(234,240,255,.04);
  font-weight: 600;
}
.hero-panel-body{ padding: 14px; }
.stack-card{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(234,240,255,.10);
  background: rgba(7,10,18,.25);
  margin-bottom: 10px;
}
.stack-ic{
  width: 36px; height: 36px;
  border-radius: 14px;
  display: grid; place-items: center;
  border: 1px solid rgba(234,240,255,.14);
  background: radial-gradient(circle at 30% 30%, rgba(109,226,255,.16), rgba(234,240,255,.03));
  color: rgba(234,240,255,.95);
  font-weight: 900;
}

/* Cards */
.cut-card{
  border-radius: var(--r-xl);
  border: 1px solid rgba(234,240,255,.12);
  background: rgba(14,20,38,.55);
  box-shadow: var(--shadow-2);
  padding: 18px 16px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.cut-icon{
  width: 44px; height: 44px;
  border-radius: 18px;
  display: grid; place-items: center;
  margin-bottom: 10px;
  background: rgba(109,226,255,.10);
  border: 1px solid rgba(109,226,255,.22);
  color: rgba(234,240,255,.95);
  font-weight: 900;
}
.surface-card{
  border-radius: var(--r-xl);
  border: 1px solid rgba(234,240,255,.12);
  background: rgba(7,10,18,.16);
  box-shadow: var(--shadow-2);
  padding: 20px 18px;
}

/* Poster */
.poster{
  border-radius: var(--r-xl);
  border: 1px solid rgba(234,240,255,.12);
  background: rgba(14,20,38,.50);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.poster-head{
  padding: 16px 16px;
  border-bottom: 1px solid rgba(234,240,255,.10);
  background: linear-gradient(180deg, rgba(234,240,255,.04), rgba(234,240,255,.01));
}
.poster-title{ font-weight: 800; }
.poster-sub{ color: rgba(234,240,255,.70); font-size: .9rem; margin-top: 2px; }
.poster-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  padding: 16px;
}
@media (max-width: 575px){
  .poster-grid{ grid-template-columns: 1fr; }
}
.poster-tile{
  border-radius: 18px;
  border: 1px solid rgba(234,240,255,.10);
  background: rgba(7,10,18,.20);
  padding: 12px 12px;
}
.tile-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 8px; }
.tile-tag{
  font-size: .75rem;
  border-radius: 999px;
  padding: .25rem .55rem;
  border: 1px solid rgba(234,240,255,.14);
  background: rgba(234,240,255,.04);
  color: rgba(234,240,255,.82);
}
.tile-ico{
  width: 32px; height: 32px;
  border-radius: 14px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,106,162,.20);
  background: rgba(255,106,162,.10);
}
.tile-sub{ margin-top: 2px; }
.poster-foot{
  padding: 14px 16px;
  border-top: 1px solid rgba(234,240,255,.10);
  background: rgba(234,240,255,.02);
}

/* Timeline */
.timeline{
  border-radius: var(--r-xl);
  border: 1px solid rgba(234,240,255,.12);
  background: rgba(14,20,38,.45);
  box-shadow: var(--shadow-2);
  padding: 10px 12px;
}
.timeline-step{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  padding: 12px 10px;
  border-bottom: 1px dashed rgba(234,240,255,.12);
}
.timeline-step:last-child{ border-bottom: 0; }
.t-dot{
  width: 14px; height: 14px;
  border-radius: 999px;
  margin-top: 4px;
  border: 1px solid rgba(229,192,107,.45);
  background: radial-gradient(circle at 30% 30%, rgba(229,192,107,.55), rgba(229,192,107,.12));
}
.note-card{
  border-radius: 18px;
  border: 1px solid rgba(234,240,255,.12);
  background: rgba(7,10,18,.18);
  padding: 14px 14px;
  box-shadow: var(--shadow-2);
}
.note-title{ font-weight: 800; margin-bottom: 6px; }

/* Model */
.model-card{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  border-radius: 18px;
  border: 1px solid rgba(234,240,255,.10);
  background: rgba(14,20,38,.42);
  padding: 12px 12px;
}
.model-ico{
  width: 40px; height: 40px;
  border-radius: 16px;
  display:grid; place-items:center;
  border: 1px solid rgba(229,192,107,.30);
  background: rgba(229,192,107,.10);
  font-weight: 900;
}
.callout{
  border-radius: 18px;
  border: 1px solid rgba(109,226,255,.18);
  background: rgba(109,226,255,.06);
  overflow: hidden;
}
.callout-in{
  padding: 14px 14px;
  border-left: 3px solid rgba(109,226,255,.55);
}
.callout-title{ font-weight: 900; margin-bottom: 4px; }

.stack-side{
  border-radius: var(--r-xl);
  border: 1px solid rgba(234,240,255,.12);
  background: rgba(14,20,38,.50);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.stack-side-head{
  padding: 16px 16px;
  border-bottom: 1px solid rgba(234,240,255,.10);
  background: rgba(234,240,255,.03);
}
.stack-side-body{ padding: 14px 16px; }
.side-item{
  display:flex; gap: 12px;
  align-items:flex-start;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(234,240,255,.12);
}
.side-item:last-child{ border-bottom: 0; padding-bottom: 0; }
.side-bullet{
  width: 12px; height: 12px; border-radius: 999px;
  margin-top: 6px;
  border: 1px solid rgba(109,226,255,.45);
  background: rgba(109,226,255,.16);
}

/* Pricing */
.price-card{
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid rgba(234,240,255,.12);
  background: rgba(14,20,38,.52);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  height: 100%;
  display:flex;
  flex-direction: column;
}
.price-card--featured{
  border-color: rgba(109,226,255,.32);
  box-shadow: 0 18px 60px rgba(109,226,255,.12);
}
.shine{
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 30%, rgba(109,226,255,.18), transparent 45%),
              radial-gradient(circle at 70% 60%, rgba(255,106,162,.14), transparent 52%);
  filter: blur(16px);
  pointer-events: none;
}
.price-top{
  position: relative;
  display:flex; justify-content:space-between; align-items:flex-start;
  gap: 10px;
  padding: 16px 16px;
  border-bottom: 1px solid rgba(234,240,255,.10);
  background: rgba(234,240,255,.03);
}
.price-name{ font-weight: 900; font-size: 1.15rem; }
.price-pill{
  border-radius: 999px;
  padding: .35rem .6rem;
  font-size: .78rem;
  border: 1px solid rgba(234,240,255,.16);
  background: rgba(234,240,255,.04);
  color: rgba(234,240,255,.86);
  font-weight: 800;
}
.price-pill--hot{
  border-color: rgba(229,192,107,.34);
  background: rgba(229,192,107,.12);
}
.price-body{
  position: relative;
  padding: 16px 16px;
  flex: 1;
}
.price-value{
  font-weight: 900;
  font-size: 1.35rem;
  margin-bottom: 10px;
}
.price-list{
  margin: 0 0 12px 0;
  padding-left: 18px;
  color: rgba(234,240,255,.78);
}
.price-list li{ margin: 6px 0; }
.price-cta{
  position: relative;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(234,240,255,.10);
}
.soft-panel{
  border-radius: var(--r-xl);
  border: 1px solid rgba(234,240,255,.12);
  background: rgba(7,10,18,.18);
  padding: 16px 16px;
  box-shadow: var(--shadow-2);
}
.hint-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border-radius: 999px;
  padding: .45rem .75rem;
  border: 1px solid rgba(234,240,255,.14);
  background: rgba(234,240,255,.04);
  color: rgba(234,240,255,.82);
  font-weight: 700;
  font-size: .85rem;
}

/* Quotes */
.quote-card{
  border-radius: var(--r-xl);
  border: 1px solid rgba(234,240,255,.12);
  background: rgba(14,20,38,.48);
  box-shadow: var(--shadow-2);
  padding: 16px 16px;
  height: 100%;
}
.quote-text{
  margin: 0 0 12px 0;
  color: rgba(234,240,255,.90);
}
.quote-meta{
  display:flex; gap: 10px;
  align-items:flex-start;
}
.quote-dot{
  width: 12px; height: 12px;
  border-radius: 999px;
  margin-top: 6px;
  border: 1px solid rgba(255,106,162,.45);
  background: rgba(255,106,162,.16);
}

/* Contact */
.contact-list{ display:flex; flex-direction:column; gap: 12px; }
.contact-item{ display:flex; gap: 12px; align-items:flex-start; }
.ci-ic{
  width: 36px; height: 36px;
  border-radius: 16px;
  display:grid; place-items:center;
  border: 1px solid rgba(234,240,255,.14);
  background: rgba(234,240,255,.04);
}
.form-shell{
  border-radius: var(--r-xl);
  border: 1px solid rgba(234,240,255,.12);
  background: rgba(14,20,38,.55);
  box-shadow: var(--shadow-1);
  overflow:hidden;
}
.form-head{
  padding: 16px 16px;
  border-bottom: 1px solid rgba(234,240,255,.10);
  background: rgba(234,240,255,.03);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
}
.form-badge{
  border-radius: 999px;
  padding: .35rem .6rem;
  font-size: .78rem;
  border: 1px solid rgba(109,226,255,.22);
  background: rgba(109,226,255,.08);
  color: rgba(234,240,255,.88);
  font-weight: 800;
}
.form-hint{
  margin-top: 6px;
  color: rgba(234,240,255,.58);
  font-size: .88rem;
}
.form-foot{
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(234,240,255,.10);
  background: rgba(7,10,18,.14);
}
.form-status{
  min-height: 22px;
  color: rgba(234,240,255,.80);
}
.form-check-input{
  background-color: rgba(234,240,255,.06);
  border: 1px solid rgba(234,240,255,.18);
}
.form-check-input:checked{
  background-color: rgba(109,226,255,.35);
  border-color: rgba(109,226,255,.45);
}

/* Mini contacts */
.mini-contacts{
  padding: 18px 0;
  border-top: 1px solid rgba(234,240,255,.08);
  border-bottom: 1px solid rgba(234,240,255,.08);
  background: rgba(7,10,18,.22);
}
.mini-contacts-inner{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.mini-link{
  color: rgba(234,240,255,.85);
  text-decoration:none;
  border-bottom: 1px solid rgba(234,240,255,.16);
}
.mini-link:hover{ color: var(--c-accent); border-bottom-color: rgba(109,226,255,.55); }
.mini-sep{ color: rgba(234,240,255,.45); }

/* Footer */
.footer-wrap{
  padding: 54px 0 24px;
  border-top: 1px solid rgba(234,240,255,.10);
  background: rgba(7,10,18,.35);
  position: relative;
  z-index: 1;
}
.footer-top{
  display: grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 22px;
}
@media (max-width: 991px){
  .footer-top{ grid-template-columns: 1fr; }
}
.footer-links{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 767px){
  .footer-links{ grid-template-columns: 1fr; }
}
.footer-col a{
  display:block;
  padding: 6px 0;
  color: rgba(234,240,255,.82);
  text-decoration:none;
}
.footer-col a:hover{ color: var(--c-accent); }
.footer-h{
  font-weight: 900;
  margin-bottom: 8px;
}
.footer-social{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.social-link{
  font-size: .9rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(234,240,255,.14);
  background: rgba(234,240,255,.03);
  text-decoration:none;
  color: rgba(234,240,255,.82);
}
.social-link:hover{
  border-color: rgba(109,226,255,.36);
  background: rgba(109,226,255,.06);
  color: rgba(234,240,255,.92);
}
.footer-bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(234,240,255,.08);
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
}