:root{
  --launch-display:"Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;

  --bg:#0c0d0f;
  --panel:#14161a;
  --line:#262a30;
  --ink:#e7d8b1;
  --muted:#a79d88;
  --acc:#c6b38a;
}
*{box-sizing:border-box}
html{scroll-snap-type:y proximity;scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#0b0c0e,#101216);color:var(--ink);font-family:"Helvetica Neue",Arial,sans-serif}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.035),transparent 42%);opacity:.55}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.top{height:80px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06)}
nav{display:flex;gap:18px;align-items:center}
nav a{color:var(--muted);text-decoration:none;font-size:.9rem}

.company-inline{display:flex;align-items:center;gap:12px}
.company-logo{width:76px;height:76px;object-fit:cover;border-radius:999px;display:block}
.company-kicker{margin:0;color:var(--muted);font-size:.7rem;letter-spacing:.24em}
.top-kicker{font-size:.66rem;order:-1}

.cinematic-hero{min-height:88vh;display:flex;flex-direction:column;justify-content:center;padding:84px 24px 72px;border-bottom:1px solid rgba(255,255,255,.05);opacity:0;transform:translateY(24px);transition:opacity 1.2s ease, transform 1.2s ease;scroll-snap-align:start;scroll-snap-stop:always}
.cinematic-hero.is-visible{opacity:1;transform:translateY(0)}
.over{margin:0;color:var(--muted);font-size:.72rem;letter-spacing:.22em}
h1{margin:10px 0 14px;font-size:clamp(44px,8vw,96px);line-height:.92;font-weight:620}
.hero-copy{max-width:620px;color:#cec3ad;font-size:1.05rem;line-height:1.6}
.hero-visual-block{margin:28px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hero-centered{align-items:center;text-align:center}
.hero-sticker{max-width:420px}
.hero-visual img{display:block;width:100%;height:auto;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 30px 40px rgba(0,0,0,.28));transform:scale(1.035);transition:transform 2.8s ease, opacity 1.6s ease;opacity:.92}
body.is-loaded .hero-visual img{transform:scale(1);opacity:1}
.terminal-line{margin:0;color:#b8ae99;font-size:.92rem;letter-spacing:.02em;font-family:"Helvetica Neue",Arial,sans-serif}
.terminal-accent{color:#e7d8b1;font-style:italic}
.purchase-panel{margin-top:20px;max-width:780px;padding:22px 24px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));box-shadow:0 16px 42px rgba(0,0,0,.24)}
.purchase-copy{display:grid;gap:10px}
.purchase-kicker,.release-spec-kicker{margin:0;color:#9f957f;font-size:.7rem;letter-spacing:.24em}
.purchase-copy h3,.release-spec-card h3{margin:0;font-size:clamp(24px,3.5vw,38px);line-height:1.06;font-weight:560}
.purchase-copy p,.release-note,.release-spec-line,.release-points li{color:#cec3ad;line-height:1.6}
.purchase-actions,.release-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:999px;text-decoration:none;font-size:.95rem;font-weight:600;transition:transform .2s ease,opacity .2s ease,border-color .2s ease,background .2s ease}
.cta:hover{transform:translateY(-1px)}
.cta-primary{background:#d8c39b;color:#111;border:1px solid rgba(255,255,255,.12)}
.cta-secondary{background:transparent;color:#e7d8b1;border:1px solid rgba(255,255,255,.18)}
.cta.is-disabled,.cta[aria-disabled="true"]{opacity:.48;pointer-events:none}

.story-section{min-height:88vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,520px);gap:42px;align-items:center;padding:34px 34px;border:1px solid rgba(255,255,255,.05);background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));box-shadow:0 20px 60px rgba(0,0,0,.24);border-radius:18px;margin:26px auto;opacity:0;transform:translateY(26px);transition:opacity .45s linear, transform 1s ease;will-change:opacity,transform;scroll-snap-align:start;scroll-snap-stop:always}
.story-section.is-visible{opacity:1;transform:translateY(0)}
.story-right{grid-template-columns:minmax(320px,520px) minmax(0,1fr)}
.story-copy{display:grid;gap:14px;transition:transform .18s linear;will-change:transform}
.story-copy h2{margin:0;font-size:clamp(28px,4vw,52px);line-height:1.02;font-weight:560}
.story-copy p{margin:0;color:#cec3ad;line-height:1.6}
.panel-over{margin:0;color:#9f957f;font-size:.7rem;letter-spacing:.24em}
.story-shot{margin:0;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.05);overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.28);transition:transform .18s linear;will-change:transform}
.story-shot img{display:block;width:100%;object-fit:cover;background:#111;transform:scale(1.04);transition:transform 1.8s ease, filter 1.8s ease;filter:saturate(.94) contrast(1.02)}
.story-section.is-visible .story-shot img{transform:scale(1)}
.story-shot-large img{height:460px;object-position:top center}
.story-shot-medium img{height:280px;object-position:top center}
.subtle-divider{border-top:0}

.service-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:8px 0 0}
.service-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-width:48px;min-height:48px}
.service-link img{display:block;width:44px;height:44px;object-fit:contain;filter:brightness(0) saturate(100%) invert(88%) sepia(19%) saturate(344%) hue-rotate(358deg) brightness(97%) contrast(89%) drop-shadow(0 10px 22px rgba(0,0,0,.28))}
.feature-grid-section{grid-template-columns:minmax(0,1fr);gap:28px}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.feature-card{padding:22px;border:1px solid rgba(255,255,255,.07);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012));box-shadow:0 16px 42px rgba(0,0,0,.18)}
.feature-kicker{margin:0 0 10px;color:#9f957f;font-size:.7rem;letter-spacing:.24em}
.feature-card h3{margin:0 0 10px;font-size:1.2rem;line-height:1.1;font-weight:560}
.feature-card p{margin:0;color:#cec3ad;line-height:1.58}

.paid-section{grid-template-columns:minmax(0,1fr) minmax(320px,460px)}
.release-points{margin:4px 0 0;padding-left:18px}
.release-points li{margin:8px 0}
.release-note{margin-top:14px;font-size:.92rem;color:#b8ae99}
.release-card{display:flex;align-items:stretch;justify-content:center;padding:0;background:transparent;border:0;box-shadow:none}
.release-spec-card{width:100%;padding:28px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));box-shadow:0 16px 42px rgba(0,0,0,.24)}
.site-footer{min-height:38vh;padding:18px 24px 70px;display:flex;align-items:flex-end;opacity:0;transform:translateY(18px);transition:opacity 1s ease, transform 1s ease;scroll-snap-align:start}
.site-footer.is-visible{opacity:1;transform:translateY(0)}
.official-marks{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.official-mark{display:block;background:transparent;object-fit:contain}
.official-mark-eu{width:118px;height:auto}
.official-mark-fi{width:92px;height:auto}

@media(max-width:900px){
  html{scroll-snap-type:none}
  .cinematic-hero,.story-section,.site-footer{min-height:auto}
  .story-section,.story-right{grid-template-columns:1fr;gap:24px;padding:24px}
  .feature-grid{grid-template-columns:1fr}
  .story-shot-large img{height:320px}
  .story-shot-medium img{height:240px}
}

@media(max-width:560px){
  .company-logo{width:84px;height:84px}
  .cinematic-hero{padding-top:64px}
  .story-shot-large img,.story-shot-medium img{height:220px}
}

/* === SILENTO WIDE CINEMATIC REFINEMENT 20260807 === */

:root{
  --launch-display:"Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;

  --bg:#090b0f;
  --panel:#12161c;
  --line:#29313a;
  --ink:#f0e7cf;
  --muted:#b7ad98;
  --acc:#d8bf8a;
}

body{
  background:
    radial-gradient(circle at 50% -10%,rgba(216,191,138,.055),transparent 38%),
    linear-gradient(180deg,#080a0d 0%,#0d1116 55%,#090b0f 100%);
  color:var(--ink);
}

.wrap{
  max-width:1480px;
  padding-left:40px;
  padding-right:40px;
}

/* Give the hero more horizontal presence */
.hero-copy{
  max-width:760px;
  color:#d7cfbd;
}

.purchase-panel{
  max-width:1040px;
  padding:28px 32px;
  background:linear-gradient(
    180deg,
    rgba(23,28,35,.94),
    rgba(15,19,24,.94)
  );
  border-color:rgba(240,231,207,.11);
}

/* Wide cinematic content cards */
.story-section{
  min-height:82vh;
  grid-template-columns:
    minmax(0,1.1fr)
    minmax(440px,650px);
  gap:64px;
  padding:48px 56px;
  margin:34px auto;
  background:linear-gradient(
    180deg,
    rgba(20,25,31,.90),
    rgba(13,17,22,.90)
  );
  border-color:rgba(240,231,207,.075);
  box-shadow:0 24px 70px rgba(0,0,0,.32);
}

.story-right{
  grid-template-columns:
    minmax(440px,650px)
    minmax(0,1.1fr);
}

.story-copy{
  max-width:680px;
}

.story-copy p,
.purchase-copy p,
.release-note,
.release-spec-line,
.release-points li{
  color:#d0c7b4;
}

.panel-over,
.purchase-kicker,
.release-spec-kicker,
.feature-kicker{
  color:#b8a986;
}

.story-shot{
  background:#0d1014;
  border-color:rgba(240,231,207,.075);
  box-shadow:0 22px 58px rgba(0,0,0,.34);
}

.story-shot-large img{
  height:560px;
}

.story-shot-medium img{
  height:360px;
}

/* Feature cards: darker/cooler, less brown */
.feature-card{
  padding:28px;
  background:linear-gradient(
    180deg,
    rgba(24,29,36,.92),
    rgba(15,19,24,.92)
  );
  border-color:rgba(240,231,207,.08);
}

/* Release area gets more breathing room */
.paid-section{
  grid-template-columns:
    minmax(0,1fr)
    minmax(480px,600px);
}

.release-spec-card{
  padding:34px;
  background:linear-gradient(
    180deg,
    rgba(24,29,36,.94),
    rgba(15,19,24,.94)
  );
  border-color:rgba(240,231,207,.10);
}

/* Keep orange/cream accents crisp */
.cta-primary{
  background:#d8bf8a;
  color:#0b0d10;
}

.cta-secondary{
  color:#f0e7cf;
  border-color:rgba(240,231,207,.25);
}

@media(max-width:1100px){
  .wrap{
    max-width:100%;
    padding-left:26px;
    padding-right:26px;
  }

  .story-section,
  .story-right,
  .paid-section{
    grid-template-columns:1fr;
    gap:30px;
    padding:32px;
  }

  .story-copy{
    max-width:none;
  }

  .story-shot-large img{
    height:420px;
  }

  .story-shot-medium img{
    height:300px;
  }
}

/* === END SILENTO WIDE CINEMATIC REFINEMENT === */


/* =========================================================
   SILENTO_CINEMATIC_FULLSCREEN_V2_20260807
   Full-screen editorial scenes + restrained blue luminosity
   ========================================================= */

:root{
  --launch-display:"Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;

  --bg:#06090d;
  --panel:#0c1219;
  --panel-deep:#080d13;
  --line:rgba(139,194,226,.14);

  --ink:#f2e8cc;
  --muted:#b9b5aa;

  --blue:#244f67;
  --blue-mid:#34779b;
  --cyan:#68b6cf;
  --warm:#d4bb84;
}

/* ---------- PAGE ---------- */

html{
  scroll-snap-type:y proximity;
  scroll-behavior:smooth;
}

body{
  background:
    radial-gradient(
      ellipse at 50% -10%,
      rgba(51,119,155,.16) 0%,
      rgba(16,42,58,.08) 28%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      #05080c 0%,
      #081019 42%,
      #06090d 100%
    );
  color:var(--ink);
}

/* Wider global frame */
.wrap{
  width:min(96vw,1700px);
  max-width:1700px;
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(24px,3.4vw,58px);
  padding-right:clamp(24px,3.4vw,58px);
}

/* ---------- HERO ---------- */

.cinematic-hero{
  min-height:100vh;
  padding-top:clamp(90px,10vh,150px);
  padding-bottom:clamp(70px,9vh,130px);
}

.hero-copy{
  max-width:820px;
  color:#d8d3c8;
}

.hero-sticker{
  max-width:500px;
}

.purchase-panel{
  width:min(1100px,92vw);
  max-width:none;

  background:
    linear-gradient(
      120deg,
      rgba(74,139,171,.10),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      rgba(18,28,38,.96),
      rgba(9,15,22,.96)
    );

  border:1px solid rgba(115,181,211,.16);

  box-shadow:
    0 28px 80px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(176,221,239,.08);
}

/* ---------- FULL SCREEN STORY SCENES ---------- */

.story-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  width:min(96vw,1680px);
  max-width:1680px;

  min-height:calc(100vh - 40px);

  grid-template-columns:
    minmax(0,1.18fr)
    minmax(430px,.82fr);

  gap:clamp(50px,6vw,100px);
  align-items:center;

  padding:
    clamp(48px,6vh,86px)
    clamp(46px,5vw,90px);

  margin:20px auto;

  border-radius:30px;
  border:1px solid rgba(109,180,214,.12);

  background:
    linear-gradient(
      115deg,
      rgba(58,126,160,.075) 0%,
      transparent 34%
    ),
    radial-gradient(
      ellipse at 84% 18%,
      rgba(52,119,155,.12),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(13,20,29,.97),
      rgba(7,12,18,.98)
    );

  box-shadow:
    0 32px 95px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(160,216,238,.065);

  scroll-snap-align:center;
  scroll-snap-stop:normal;
}

/* controlled blue light sweep */
.story-section::before{
  content:"";
  position:absolute;
  z-index:-1;

  width:70%;
  height:65%;

  top:-24%;
  right:-18%;

  background:
    radial-gradient(
      ellipse,
      rgba(63,151,193,.14) 0%,
      rgba(36,89,116,.07) 38%,
      transparent 72%
    );

  filter:blur(6px);
  pointer-events:none;
}

/* fine metallic highlight */
.story-section::after{
  content:"";
  position:absolute;
  z-index:-1;

  left:7%;
  right:7%;
  top:0;
  height:1px;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(123,198,227,.30),
    rgba(236,226,196,.12),
    transparent
  );

  opacity:.60;
  pointer-events:none;
}

/* Alternate the shine direction */
.story-section:nth-of-type(even)::before{
  right:auto;
  left:-18%;
}

/* reversed story section */
.story-right{
  grid-template-columns:
    minmax(430px,.82fr)
    minmax(0,1.18fr);
}

/* ---------- COPY ---------- */

.story-copy{
  position:relative;
  z-index:2;
  max-width:720px;
}

.story-copy h2{
  font-size:clamp(40px,4.5vw,72px);
  line-height:.98;
  letter-spacing:-.025em;
  color:#f2e8cc;
}

.story-copy p{
  max-width:680px;
  color:#c9c7c0;
  font-size:clamp(15px,1.05vw,18px);
  line-height:1.72;
}

.panel-over,
.purchase-kicker,
.release-spec-kicker,
.feature-kicker{
  color:#7fb2c9;
  letter-spacing:.26em;
}

/* ---------- PRODUCT SCREENSHOTS ---------- */

.story-shot{
  position:relative;
  z-index:2;

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      rgba(42,105,135,.10),
      rgba(5,8,12,.92)
    );

  border:1px solid rgba(105,180,213,.15);

  box-shadow:
    0 28px 75px rgba(0,0,0,.48),
    0 0 55px rgba(35,104,136,.09),
    inset 0 1px 0 rgba(164,218,239,.09);
}

.story-shot::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;

  background:
    linear-gradient(
      125deg,
      rgba(136,209,235,.08),
      transparent 23%
    );
}

.story-shot img{
  filter:
    saturate(.96)
    contrast(1.04)
    brightness(.96);

  transform:scale(1.025);
}

.story-section.is-visible .story-shot img{
  transform:scale(1);
}

/* Images now have real presence */
.story-shot-large img{
  height:min(68vh,720px);
  min-height:500px;
}

.story-shot-medium img{
  height:min(58vh,610px);
  min-height:430px;
}

/* ---------- FEATURE CARDS ---------- */

.feature-grid-section{
  grid-template-columns:1fr;
}

.feature-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

.feature-card{
  padding:32px;

  background:
    linear-gradient(
      135deg,
      rgba(52,118,150,.075),
      transparent 38%
    ),
    rgba(10,16,23,.88);

  border:1px solid rgba(104,180,213,.12);

  box-shadow:
    inset 0 1px 0 rgba(150,210,234,.05),
    0 18px 50px rgba(0,0,0,.25);
}

/* ---------- RELEASE ---------- */

.paid-section{
  grid-template-columns:
    minmax(0,1.05fr)
    minmax(480px,.95fr);
}

.release-spec-card{
  padding:clamp(32px,4vw,52px);

  background:
    radial-gradient(
      ellipse at 80% 0%,
      rgba(66,148,185,.13),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(17,27,37,.96),
      rgba(8,14,20,.96)
    );

  border:1px solid rgba(113,187,218,.15);

  box-shadow:
    0 26px 70px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(164,219,240,.08);
}

/* ---------- BUTTONS ---------- */

.cta-primary{
  background:
    linear-gradient(
      180deg,
      #dcc594,
      #cdb37e
    );
  color:#0b1015;
  border:1px solid rgba(255,255,255,.15);

  box-shadow:
    0 8px 24px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.32);
}

.cta-secondary{
  background:rgba(31,75,96,.13);
  color:#e9e4d8;

  border:1px solid rgba(102,179,211,.24);

  box-shadow:
    inset 0 1px 0 rgba(151,211,235,.06);
}

.cta-secondary:hover{
  background:rgba(41,104,132,.19);
  border-color:rgba(110,191,224,.38);
}

/* ---------- WINDOWS / LINUX DOWNLOAD PANELS ---------- */

.silento-download-block{
  position:relative;
  overflow:hidden;

  width:min(96vw,1680px);
  max-width:1680px;

  margin:20px auto;
  padding:clamp(44px,5vw,72px);

  border-radius:30px;

  background:
    radial-gradient(
      ellipse at 90% 0%,
      rgba(56,139,178,.14),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      rgba(13,21,30,.97),
      rgba(7,12,18,.98)
    );

  border:1px solid rgba(105,181,214,.13);

  box-shadow:
    0 28px 80px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(164,217,239,.07);
}

.silento-download-block h2{
  margin-top:0;
  color:#f2e8cc;
  font-size:clamp(32px,4vw,56px);
}

.silento-download-block p{
  color:#c8c6bf;
}

.download-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:50px;
  margin-top:12px;
  padding:0 22px;

  border-radius:999px;

  background:rgba(35,91,117,.22);
  color:#f0e8d5;

  border:1px solid rgba(106,188,220,.28);
  text-decoration:none;

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.download-button:hover{
  transform:translateY(-2px);
  background:rgba(48,123,154,.28);
  border-color:rgba(116,200,232,.42);
}

/* ---------- RESPONSIVE ---------- */

@media(max-width:1100px){

  .wrap{
    width:100%;
    padding-left:24px;
    padding-right:24px;
  }

  .story-section,
  .story-right,
  .paid-section{
    width:calc(100% - 28px);
    min-height:auto;

    grid-template-columns:1fr;
    gap:32px;

    padding:34px 28px;
  }

  .story-shot-large img,
  .story-shot-medium img{
    height:auto;
    min-height:0;
    max-height:none;
  }

  .feature-grid{
    grid-template-columns:1fr;
  }

  .silento-download-block{
    width:calc(100% - 28px);
  }
}

@media(max-width:600px){

  .story-section,
  .silento-download-block{
    border-radius:20px;
  }

  .story-copy h2{
    font-size:clamp(34px,11vw,48px);
  }
}

/* === END SILENTO_CINEMATIC_FULLSCREEN_V2_20260807 === */


/* === SILENTO VERSION DROPDOWN 20260807 === */

.version-menu{
  width:min(520px,100%);
  margin-top:26px;
  border:1px solid rgba(108,187,220,.18);
  border-radius:14px;
  background:rgba(7,13,19,.72);
  overflow:hidden;
}

.version-menu summary{
  list-style:none;
  cursor:pointer;
  min-height:58px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#eee6d2;
}

.version-menu summary::-webkit-details-marker{
  display:none;
}

.version-menu summary span{
  font-size:.76rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#86b8cd;
}

.version-menu summary strong{
  font-size:.95rem;
  font-weight:600;
}

.version-panel{
  padding:8px 12px 14px;
  border-top:1px solid rgba(108,187,220,.10);
}

.version-kicker{
  margin:6px 6px 10px !important;
  font-size:.62rem !important;
  letter-spacing:.20em;
  color:#7faec2 !important;
}

.version-panel > a{
  min-height:46px;
  padding:0 12px;
  margin:4px 0;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#eee6d2;
  text-decoration:none;
  border:1px solid transparent;
}

.version-panel > a:hover{
  background:rgba(52,125,156,.12);
  border-color:rgba(111,192,224,.18);
}

.version-panel small{
  color:#82b7cd;
  text-transform:uppercase;
  letter-spacing:.10em;
}

.installer-preview{
  margin-top:12px;
  padding:12px;
  border-top:1px solid rgba(108,187,220,.10);
}

.installer-preview span{
  display:block;
  margin-bottom:7px;
  color:#7faec2;
  font-size:.60rem;
  letter-spacing:.18em;
}

.installer-preview code{
  display:block;
  color:#aaa;
  font-size:.78rem;
}

/* === END SILENTO VERSION DROPDOWN === */

/* === SILENTO HERO VERSION / CYBER BUTTON / MOTION 20260807 === */

.hero-version-slot{
  margin-top:24px;
  max-width:560px;
}

.version-menu{
  position:relative;
  width:min(560px,100%);
  border:1px solid rgba(96,224,255,.34);
  border-radius:16px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(8,14,24,.94), rgba(5,9,17,.92)),
    linear-gradient(90deg, rgba(0,190,255,.06), rgba(172,89,255,.07), rgba(0,255,231,.05));
  box-shadow:
    0 0 0 1px rgba(104,227,255,.08) inset,
    0 24px 60px rgba(0,0,0,.34),
    0 0 28px rgba(24,174,255,.18);
  backdrop-filter: blur(8px);
}

.version-menu::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(0,255,240,.06),
      rgba(110,76,255,.08),
      rgba(0,180,255,.05));
  mix-blend-mode:screen;
}

.version-menu summary{
  list-style:none;
  cursor:pointer;
  min-height:60px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(10,24,38,.88), rgba(17,21,43,.82));
  transition:
    background .35s ease,
    box-shadow .35s ease,
    transform .25s ease;
}

.version-menu summary:hover{
  background:
    linear-gradient(90deg, rgba(13,34,54,.94), rgba(26,26,60,.90));
  box-shadow:
    0 0 0 1px rgba(121,235,255,.12) inset,
    0 0 24px rgba(23,191,255,.16);
  transform: translateY(-1px);
}

.version-menu summary::-webkit-details-marker{
  display:none;
}

.version-menu summary span{
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#7fe0ff;
  text-shadow:0 0 12px rgba(94,224,255,.32);
}

.version-menu summary strong{
  font-size:.96rem;
  font-weight:650;
  color:#f2ead8;
  letter-spacing:.04em;
}

.version-menu summary::after{
  content:"▾";
  color:#84eaff;
  font-size:1rem;
  margin-left:14px;
  text-shadow:0 0 12px rgba(90,231,255,.42);
}

.version-menu[open] summary::after{
  content:"▴";
}

.version-panel{
  position:relative;
  z-index:1;
  padding:10px 12px 14px;
  border-top:1px solid rgba(106,222,255,.12);
  background:linear-gradient(180deg, rgba(8,14,23,.76), rgba(8,12,20,.88));
}

.version-kicker{
  margin:6px 6px 10px !important;
  color:#73d6f7 !important;
  font-size:.61rem !important;
  letter-spacing:.22em !important;
  text-transform:uppercase;
}

.version-panel > a{
  min-height:48px;
  padding:0 14px;
  margin:6px 0;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-decoration:none;
  color:#efe7d5;
  background:rgba(13,22,36,.72);
  border:1px solid rgba(96,224,255,.10);
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

.version-panel > a:hover{
  transform:translateX(3px);
  background:linear-gradient(90deg, rgba(22,66,96,.40), rgba(66,36,108,.34));
  border-color:rgba(120,233,255,.22);
  box-shadow:
    0 0 0 1px rgba(98,222,255,.12) inset,
    0 0 18px rgba(31,180,255,.16);
}

.version-panel small{
  color:#7fdcff;
  text-transform:uppercase;
  letter-spacing:.14em;
}

.installer-preview{
  margin-top:12px;
  padding:12px;
  border-top:1px solid rgba(106,222,255,.10);
}

.installer-preview span{
  display:block;
  margin-bottom:8px;
  color:#6fd9f8;
  font-size:.60rem;
  letter-spacing:.20em;
  text-transform:uppercase;
}

.installer-preview code{
  display:block;
  color:#c6d6df;
  font-size:.78rem;
  white-space:normal;
}

/* motion refinement */
.cinematic-hero,
.story-section,
.site-footer{
  transition:
    opacity 1s cubic-bezier(.22,1,.36,1),
    transform 1.15s cubic-bezier(.22,1,.36,1);
}

.story-section{
  --mx:0;
  --my:0;
  opacity:0;
  transform:translateY(34px) scale(.992);
}

.story-section.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

.story-copy,
.story-shot,
.purchase-panel,
.release-spec-card,
.feature-card{
  transition:
    transform .75s cubic-bezier(.22,1,.36,1),
    box-shadow .75s cubic-bezier(.22,1,.36,1),
    border-color .45s ease,
    background .45s ease;
  will-change:transform;
}

.story-copy{
  transform:translate3d(calc(var(--mx) * -10px), calc(var(--my) * -8px), 0);
}

.story-shot{
  transform:translate3d(calc(var(--mx) * 12px), calc(var(--my) * 12px), 0);
}

.story-shot img{
  transition:
    transform 2.4s cubic-bezier(.22,1,.36,1),
    filter 1.8s ease;
  filter:saturate(1.02) contrast(1.04) brightness(1.02);
}

.story-section:hover .story-shot img{
  transform:scale(1.03);
  filter:saturate(1.08) contrast(1.06) brightness(1.04);
}

.purchase-panel:hover,
.release-spec-card:hover,
.feature-card:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 72px rgba(0,0,0,.28);
}

/* === END SILENTO HERO VERSION / CYBER BUTTON / MOTION === */


/* ==========================================================
   SILENTO_HOUSE_MODELS_20260807
   House architecture: Silento / Hattara / Vettiver
   ========================================================== */

.silento-top{
  position:sticky;
  top:0;
  z-index:60;
}

.brand-wordmark{
  color:#e7d8b1;
  text-decoration:none;
  font-size:.92rem;
  font-weight:650;
  letter-spacing:.34em;
}

.house-nav{
  display:flex;
  align-items:center;
  gap:22px;
}

.house-nav > a,
.nav-models > summary{
  color:#a79d88;
  text-decoration:none;
  font-size:.72rem;
  letter-spacing:.16em;
  cursor:pointer;
  transition:color .25s ease;
}

.house-nav > a:hover,
.nav-models > summary:hover{
  color:#e7d8b1;
}

.nav-models{
  position:relative;
}

.nav-models summary{
  list-style:none;
}

.nav-models summary::-webkit-details-marker{
  display:none;
}

.nav-models-panel{
  position:absolute;
  top:30px;
  right:0;
  width:250px;
  padding:10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:15px;
  background:rgba(12,13,15,.96);
  box-shadow:0 26px 60px rgba(0,0,0,.42);
  backdrop-filter:blur(16px);
}

.nav-models-panel a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:12px 13px;
  border-radius:10px;
  color:#e7d8b1;
  text-decoration:none;
  transition:background .2s ease, transform .2s ease;
}

.nav-models-panel a:hover{
  background:rgba(255,255,255,.045);
  transform:translateX(2px);
}

.nav-models-panel a.is-current{
  background:rgba(255,255,255,.035);
}

.nav-models-panel span{
  font-size:.72rem;
  letter-spacing:.14em;
}

.nav-models-panel small{
  color:#827b6e;
  font-size:.62rem;
  white-space:nowrap;
}

.house-hero{
  min-height:90vh;
}

.house-hero h1{
  font-size:clamp(72px,15vw,190px);
  letter-spacing:-.055em;
  line-height:.78;
}

.house-lead{
  max-width:720px;
  margin-top:26px;
}

.house-model-cue{
  width:min(520px,80vw);
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:70px;
  color:#7f7768;
  font-size:.62rem;
  letter-spacing:.24em;
}

.cue-line{
  height:1px;
  flex:1;
  background:linear-gradient(90deg,rgba(198,179,138,.55),transparent);
}

.model-showroom{
  grid-template-columns:1fr;
  gap:34px;
}

.showroom-heading{
  max-width:760px;
}

.model-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.model-card{
  min-height:420px;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid rgba(255,255,255,.07);
  border-radius:24px;
  background:
    radial-gradient(circle at 80% 5%,rgba(255,255,255,.045),transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.009));
  color:#e7d8b1;
  text-decoration:none;
  box-shadow:0 24px 70px rgba(0,0,0,.25);
  transition:transform .55s cubic-bezier(.2,.75,.25,1),
             border-color .55s ease,
             box-shadow .55s ease;
}

.model-card:hover{
  transform:translateY(-7px);
  border-color:rgba(198,179,138,.24);
  box-shadow:0 34px 90px rgba(0,0,0,.34);
}

.model-card-top,
.model-card-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
}

.model-status{
  margin:0;
  font-size:.64rem;
  letter-spacing:.22em;
}

.model-status.available{
  color:#c9bea7;
}

.model-status.coming{
  color:#8099a7;
}

.model-card-number{
  margin:0;
  color:#59564f;
  font-size:.72rem;
}

.model-card h3{
  margin:auto 0 10px;
  font-size:clamp(42px,6vw,76px);
  line-height:.9;
  letter-spacing:-.045em;
  font-weight:570;
}

.model-subtitle{
  margin:0 0 44px;
  color:#aaa08d;
  line-height:1.55;
}

.model-price{
  font-size:2.15rem;
  font-weight:520;
}

.model-link{
  color:#9b927f;
  font-size:.66rem;
  letter-spacing:.16em;
}

.model-card-vettiver{
  background:
    radial-gradient(circle at 78% 4%,rgba(90,155,184,.08),transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.008));
}

.house-about{
  grid-template-columns:minmax(0,1fr) minmax(300px,430px);
}

.house-signature{
  padding:34px;
  border-left:1px solid rgba(255,255,255,.08);
}

.signature-kicker{
  margin:0 0 60px;
  color:#e7d8b1 !important;
  font-size:1rem;
  letter-spacing:.30em;
}

.house-signature p{
  color:#a79d88;
}

.signature-small{
  margin-top:28px !important;
  color:#6e695e !important;
  font-size:.78rem;
}

.model-price-panel{
  width:min(650px,90vw);
  margin-top:20px;
  padding:20px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));
  box-shadow:0 18px 46px rgba(0,0,0,.22);
}

.model-price-kicker{
  margin:0 0 4px;
  color:#8f8777;
  font-size:.62rem;
  letter-spacing:.22em;
}

.model-price-value{
  margin:0;
  color:#e7d8b1;
  font-size:2rem;
  line-height:1;
}

.model-price-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  color:#aaa08d;
  font-size:.78rem;
}

.model-price-copy strong{
  color:#d4c7aa;
  font-weight:560;
}

.release-model-price{
  margin:16px 0 20px;
  color:#e7d8b1;
  font-size:2.8rem;
  line-height:1;
}

.vettiver-hero h1{
  font-size:clamp(60px,13vw,150px);
  letter-spacing:-.055em;
}

.vettiver-price-line{
  display:flex;
  align-items:baseline;
  gap:24px;
  margin-top:28px;
}

.vettiver-price-line strong{
  font-size:2.6rem;
  font-weight:520;
}

.vettiver-price-line span{
  color:#8296a0;
  font-size:.68rem;
  letter-spacing:.22em;
}

.vettiver-machine-mark{
  width:min(520px,85vw);
  min-height:250px;
  margin-top:54px;
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid rgba(105,174,204,.12);
  border-radius:24px;
  background:
    radial-gradient(circle at 70% 10%,rgba(93,167,198,.09),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006));
}

.vettiver-machine-mark > span{
  align-self:flex-end;
  color:rgba(231,216,177,.82);
  font-size:9rem;
  font-weight:260;
  line-height:.75;
}

.vettiver-machine-mark small{
  color:#607b89;
  letter-spacing:.24em;
}

.vettiver-intro{
  grid-template-columns:minmax(0,1fr) minmax(320px,440px);
}

.coming-panel{
  padding:30px;
  border:1px solid rgba(105,174,204,.12);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(88,148,175,.045),rgba(255,255,255,.008));
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.coming-kicker{
  margin:0 0 34px;
  color:#6e8793;
  font-size:.64rem;
  letter-spacing:.22em;
}

.coming-panel h3{
  margin:0;
  font-size:2rem;
  font-weight:540;
}

.coming-price{
  margin:20px 0 8px;
  color:#e7d8b1;
  font-size:3rem;
}

.coming-panel > p:not(.coming-kicker):not(.coming-price){
  color:#9aa7ad;
}

.coming-panel > span{
  display:block;
  margin-top:30px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.06);
  color:#696f70;
  font-size:.76rem;
}

@media(max-width:760px){
  .house-nav{
    gap:12px;
  }

  .house-nav > a,
  .nav-models > summary{
    font-size:.62rem;
  }

  .brand-wordmark{
    font-size:.78rem;
  }

  .model-grid{
    grid-template-columns:1fr;
  }

  .model-card{
    min-height:330px;
  }

  .house-about,
  .vettiver-intro{
    grid-template-columns:1fr;
  }

  .house-signature{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.08);
  }

  .model-price-panel{
    align-items:flex-start;
    flex-direction:column;
  }

  .model-price-copy{
    align-items:flex-start;
  }
}

/* === END SILENTO_HOUSE_MODELS_20260807 === */



/* === SILENTO_HANDSOME_VETTIVER_20260807 === */

:root{
  --launch-display:"Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;

  --house-bg:#081016;
  --house-bg-2:#0c1518;
  --house-ink:#eadfc7;
  --house-ink-soft:#cbbda2;
  --house-muted:#8e8778;
  --house-line:rgba(234,223,199,.11);
  --house-panel:rgba(15,22,24,.78);
  --vetiver:#6f8267;
  --vetiver-deep:#55644f;
  --vetiver-soft:rgba(111,130,103,.16);
  --cream-glow:rgba(234,223,199,.08);
}

body.silento-house{
  margin:0;
  min-height:100vh;
  height:100vh;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 16%, rgba(111,130,103,.16), transparent 26%),
    radial-gradient(circle at 28% 78%, rgba(234,223,199,.05), transparent 24%),
    linear-gradient(160deg,#061016 0%, #091217 42%, #071017 100%);
  color:var(--house-ink);
  font-family:"Helvetica Neue", Arial, sans-serif;
}

.portal-top{
  position:fixed;
  z-index:40;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(94vw,1520px);
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(234,223,199,.06);
}

.portal-wordmark{
  color:var(--house-ink);
  text-decoration:none;
  font-size:.82rem;
  font-weight:650;
  letter-spacing:.38em;
}

.portal-origin{
  color:var(--house-muted);
  font-size:.62rem;
  letter-spacing:.24em;
}

.house-portal{
  position:relative;
  width:min(94vw,1520px);
  height:100vh;
  margin:0 auto;
  display:flex;
  align-items:center;
}

.portal-center{
  position:relative;
  z-index:3;
  width:min(900px, 82vw);
}

.portal-kicker{
  margin:0 0 18px;
  color:var(--house-muted);
  font-size:.72rem;
  letter-spacing:.34em;
}

.portal-center h1{
  margin:0;
  color:var(--house-ink);
  font-size:clamp(104px,16vw,248px);
  line-height:.77;
  font-weight:600;
  letter-spacing:-.072em;
  text-shadow:0 8px 28px rgba(0,0,0,.24);
}

.portal-tagline{
  margin:28px 0 0;
  color:var(--house-ink);
  font-size:clamp(24px,3vw,44px);
  line-height:1;
  font-weight:420;
  letter-spacing:-.03em;
}

.portal-intro{
  margin:22px 0 0;
  max-width:690px;
  color:var(--house-ink-soft);
  font-size:1.05rem;
  line-height:1.7;
}

.portal-actions{
  display:flex;
  gap:18px;
  margin-top:48px;
}

.portal-actions button{
  min-width:230px;
  min-height:78px;
  padding:0 22px;
  display:flex;
  align-items:center;
  gap:20px;
  border:1px solid rgba(234,223,199,.10);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  color:var(--house-ink);
  cursor:pointer;
  text-align:left;
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .28s ease,
    border-color .28s ease,
    background .28s ease;
  box-shadow:
    0 18px 42px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.portal-actions button:hover{
  transform:translateY(-4px);
  border-color:rgba(234,223,199,.24);
  background:
    linear-gradient(180deg, rgba(111,130,103,.16), rgba(255,255,255,.02));
  box-shadow:
    0 24px 56px rgba(0,0,0,.28),
    0 0 0 1px rgba(111,130,103,.14);
}

.portal-actions button span{
  color:var(--vetiver);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.2em;
}

.portal-actions button strong{
  font-size:.84rem;
  letter-spacing:.18em;
  font-weight:620;
}

.portal-footnote{
  position:absolute;
  left:0;
  bottom:34px;
  margin:0;
  color:#6f6b61;
  font-size:.62rem;
  letter-spacing:.18em;
}

.portal-glow,
.portal-glow-b{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(4px);
}

.portal-glow{
  right:-6vw;
  top:10vh;
  width:52vw;
  height:52vw;
  background:
    radial-gradient(circle, rgba(111,130,103,.12), transparent 58%);
  opacity:.9;
}

.portal-glow-b{
  left:10vw;
  bottom:6vh;
  width:28vw;
  height:28vw;
  background:
    radial-gradient(circle, rgba(234,223,199,.06), transparent 62%);
  opacity:.75;
}

.portal-panel{
  position:fixed;
  z-index:100;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  background:rgba(4,8,10,.62);
  backdrop-filter:blur(14px);
  opacity:0;
  transition:opacity .3s ease;
}

.portal-panel[hidden]{
  display:none !important;
}

.portal-panel.is-open{
  opacity:1;
}

.portal-panel-inner{
  width:min(760px,94vw);
  height:100%;
  overflow:auto;
  padding:96px 42px 56px;
  border-left:1px solid rgba(234,223,199,.08);
  background:
    radial-gradient(circle at 84% 12%, rgba(111,130,103,.15), transparent 26%),
    linear-gradient(180deg, rgba(16,22,25,.96), rgba(10,16,18,.98));
  box-shadow:-40px 0 100px rgba(0,0,0,.34);
  transform:translateX(42px);
  transition:transform .42s cubic-bezier(.2,.8,.2,1);
}

.portal-panel.is-open .portal-panel-inner{
  transform:translateX(0);
}

.panel-close{
  position:fixed;
  z-index:120;
  top:24px;
  right:28px;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(234,223,199,.10);
  background:rgba(10,16,18,.86);
  color:var(--house-ink);
  cursor:pointer;
  font-size:1.4rem;
  line-height:1;
}

.portal-panel-kicker{
  margin:0 0 20px;
  color:var(--vetiver);
  font-size:.68rem;
  letter-spacing:.28em;
}

.portal-panel-inner h2{
  margin:0 0 26px;
  color:var(--house-ink);
  font-size:clamp(42px,5vw,78px);
  line-height:.94;
  font-weight:560;
  letter-spacing:-.04em;
}

.portal-panel-inner p{
  color:var(--house-ink-soft);
  line-height:1.72;
}

.portal-back-link{
  display:inline-block;
  margin-top:36px;
  color:var(--house-ink-soft);
  text-decoration:none;
  font-size:.64rem;
  letter-spacing:.18em;
}

.portal-models-inner{
  width:min(860px,95vw);
}

.portal-model-list{
  display:grid;
  gap:18px;
  margin-top:26px;
}

.portal-model{
  min-height:210px;
  display:grid;
  grid-template-columns:110px 1fr auto;
  align-items:center;
  gap:26px;
  padding:26px 28px;
  text-decoration:none;
  color:var(--house-ink);
  border:1px solid rgba(234,223,199,.09);
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
  box-shadow:0 18px 46px rgba(0,0,0,.18);
  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}

.portal-model:hover{
  transform:translateY(-4px);
  border-color:rgba(234,223,199,.20);
  box-shadow:0 26px 58px rgba(0,0,0,.26);
}

.model-vettiver{
  background:
    radial-gradient(circle at 88% 18%, rgba(111,130,103,.14), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
}

.portal-model-mark{
  width:94px;
  height:94px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  border-radius:50%;
  border:1px solid rgba(234,223,199,.16);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 10px 26px rgba(0,0,0,.18);
  overflow:hidden;
}

.portal-model-mark span{
  position:relative;
  z-index:2;
  color:var(--house-ink);
  font-size:2rem;
  font-weight:620;
  letter-spacing:-.04em;
}

.mark-hattara{
  background:
    radial-gradient(circle at 50% 40%, rgba(234,223,199,.18), transparent 40%),
    linear-gradient(180deg, rgba(111,130,103,.10), rgba(255,255,255,.02));
}

.mark-hattara::before{
  content:"";
  position:absolute;
  inset:13px;
  border-radius:46% 54% 52% 48% / 43% 57% 45% 55%;
  border:1px solid rgba(234,223,199,.20);
}

.mark-vettiver{
  border-radius:26px;
  background:
    radial-gradient(circle at 50% 35%, rgba(234,223,199,.12), transparent 32%),
    linear-gradient(180deg, rgba(111,130,103,.22), rgba(85,100,79,.36));
}

.mark-vettiver::before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:20px;
  border:1px solid rgba(234,223,199,.16);
}

.portal-model-copy small{
  display:block;
  margin-bottom:18px;
  color:var(--vetiver);
  font-size:.64rem;
  letter-spacing:.18em;
}

.portal-model-copy strong{
  display:block;
  color:var(--house-ink);
  font-size:clamp(30px,4vw,50px);
  line-height:.92;
  font-weight:560;
  letter-spacing:-.035em;
}

.portal-model-copy p{
  margin:12px 0 0;
  color:var(--house-ink-soft);
  font-size:.96rem;
  line-height:1.6;
}

.portal-model-arrow{
  color:var(--house-ink-soft);
  font-size:.68rem;
  letter-spacing:.16em;
  white-space:nowrap;
}

.portal-model-note{
  margin-top:18px;
  color:#8a8476;
  font-size:.9rem;
}

@media(max-width:860px){
  .portal-actions{
    flex-direction:column;
    align-items:flex-start;
  }

  .portal-model{
    grid-template-columns:1fr;
    gap:18px;
  }

  .portal-model-arrow{
    display:inline-block;
  }

  .portal-panel-inner{
    width:100%;
    padding:88px 28px 48px;
  }
}

@media(max-width:640px){
  .portal-top{
    height:68px;
  }

  .portal-origin{
    display:none;
  }

  .portal-center{
    width:92vw;
  }

  .portal-center h1{
    font-size:clamp(68px,24vw,120px);
  }

  .portal-tagline{
    font-size:28px;
  }

  .portal-intro{
    font-size:.98rem;
  }

  .portal-actions button{
    min-width:0;
    width:min(100%,320px);
    min-height:68px;
  }

  .portal-footnote{
    bottom:20px;
    max-width:78vw;
  }
}

/* === END SILENTO_HANDSOME_VETTIVER_20260807 === */


/* === SILENTO_REAL_EXISTING_MARKS_20260807 === */

.real-hattara-mark{
  background:transparent !important;
  border-color:rgba(234,223,199,.12) !important;
  overflow:hidden;
}

.real-hattara-mark img{
  display:block;
  width:88%;
  height:88%;
  object-fit:contain;
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,.28))
    saturate(.96);
}

.provisional-vettiver-mark{
  background:
    radial-gradient(circle at 50% 32%,rgba(234,223,199,.08),transparent 34%),
    linear-gradient(150deg,rgba(111,130,103,.28),rgba(74,89,69,.16)) !important;
}

.provisional-vettiver-mark svg{
  display:block;
  width:72px;
  height:72px;
}

.house-existing-marks{
  margin-top:54px;
  padding-top:28px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  border-top:1px solid rgba(234,223,199,.08);
}

.house-developer-mark{
  display:flex;
  align-items:center;
  gap:14px;
}

.house-developer-mark span{
  color:#777064;
  font-size:.56rem;
  letter-spacing:.22em;
}

.house-developer-mark img{
  width:66px;
  height:66px;
  display:block;
  object-fit:cover;
  border-radius:50%;
  opacity:.9;
}

.house-origin-marks{
  display:flex;
  align-items:center;
  gap:18px;
}

.house-origin-marks img:first-child{
  width:108px;
  height:auto;
}

.house-origin-marks img:last-child{
  width:84px;
  height:auto;
}

@media(max-width:700px){
  .house-existing-marks{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* === END SILENTO_REAL_EXISTING_MARKS_20260807 === */


/* === SILENTO TYPEWRITER REFINEMENT === */
.portal-hero-title,
.portal-tagline,
.portal-panel-title,
.portal-model-name,
.portal-model-kicker,
.model-title,
.model-name,
.house-title,
.house-kicker {
  font-family: var(--launch-display);
  letter-spacing: -0.02em;
}

/* Hattara mark: remove the extra circle shell */
.model-mark-hattara-plain,
.model-mark-shell-hattara-plain {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.model-mark-hattara-plain img,
.model-mark-shell-hattara-plain img {
  filter: none !important;
}

/* keep Vettiver provisional mark elegant */
.model-mark,
.model-mark-shell {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* tagline feel closer to launch window */
.portal-tagline {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  color: #e7d8b1;
}
/* === END SILENTO TYPEWRITER REFINEMENT === */

/* === SILENTO EXACT HATTARA MARK + HELVETICA AUTHORITY === */

/* Actual Silento font authority: Helvetica bold */
.portal-panel,
.portal-panel button,
.portal-panel a,
.portal-panel h2,
.portal-panel p,
.portal-panel span,
.portal-panel strong,
.portal-panel small,
.portal-model-copy,
.portal-model-copy strong,
.portal-model-copy small,
.portal-model-copy p,
.portal-model-arrow,
.portal-panel-kicker{
  font-family:"Helvetica",Arial,sans-serif !important;
}

.portal-panel-inner h2,
.portal-model-copy strong{
  font-weight:700 !important;
}


/* ---------------------------------------------------------
   HATTARA:
   completely remove the decorative circular shell.
   The cotton candy itself is the logo.
   --------------------------------------------------------- */

.portal-model-mark.mark-hattara.real-hattara-mark{
  width:94px !important;
  height:94px !important;

  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;

  background:none !important;
  background-color:transparent !important;
  background-image:none !important;

  box-shadow:none !important;
  filter:none !important;

  overflow:visible !important;
  padding:0 !important;
}

/* Kill every inherited ring/pseudo-ring */
.portal-model-mark.mark-hattara.real-hattara-mark::before,
.portal-model-mark.mark-hattara.real-hattara-mark::after,
.mark-hattara::before,
.mark-hattara::after,
.real-hattara-mark::before,
.real-hattara-mark::after{
  content:none !important;
  display:none !important;

  border:0 !important;
  outline:0 !important;
  background:none !important;
  box-shadow:none !important;
}


/* Cotton candy alone */
.portal-model-mark.mark-hattara.real-hattara-mark img{
  display:block !important;

  width:82px !important;
  height:82px !important;

  margin:auto !important;
  padding:0 !important;

  object-fit:contain !important;

  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;

  background:transparent !important;

  filter:drop-shadow(0 9px 18px rgba(0,0,0,.25)) !important;
}


/* Keep Vettiver's provisional enclosure untouched */
.portal-model-mark.mark-vettiver{
  font-family:"Helvetica",Arial,sans-serif !important;
}

/* === END SILENTO EXACT HATTARA MARK + HELVETICA AUTHORITY === */


/* === SILENTO_ENGINE_MARKS_PATCH_20260807 === */
body.silento-engine-refined{
  --portal-cream:#e8dfc7;
  --portal-ink:#0b0c0f;
  --vetiver-1:#73846a;
  --vetiver-2:#556451;
  --vetiver-3:#c7d1bb;
  --vetiver-line:rgba(212,225,201,.22);
  --soft-line:rgba(232,223,199,.14);
}

body.silento-engine-refined .portal-tagline,
body.silento-engine-refined .panel-over,
body.silento-engine-refined .engine-kicker,
body.silento-engine-refined .model-link,
body.silento-engine-refined .house-mark-label{
  font-family:"Helvetica Neue", Arial, sans-serif;
  letter-spacing:.16em;
}

body.silento-engine-refined .engine-choice-card{
  position:relative;
}

body.silento-engine-refined .engine-card-grid{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  width:100%;
}

body.silento-engine-refined .engine-mark-shell{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

body.silento-engine-refined .engine-mark-img{
  display:block;
  object-fit:contain;
}

body.silento-engine-refined .engine-mark-img--hattara{
  width:56px;
  height:56px;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.22));
}

body.silento-engine-refined .engine-copy{
  min-width:0;
}

body.silento-engine-refined .engine-copy h3{
  margin:0 0 6px;
  color:var(--portal-cream);
  font-size:clamp(28px,3vw,40px);
  line-height:.96;
  font-weight:650;
  letter-spacing:-.02em;
}

body.silento-engine-refined .engine-copy p{
  margin:0;
  color:#d5ccb7;
  font-size:.96rem;
  line-height:1.45;
}

body.silento-engine-refined .engine-kicker{
  margin:0 0 8px;
  color:#8e987c;
  font-size:.62rem;
  letter-spacing:.20em;
  text-transform:uppercase;
}

body.silento-engine-refined .model-link{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  color:var(--portal-cream);
  text-decoration:none;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}

body.silento-engine-refined .model-link:hover{
  opacity:.84;
}

body.silento-engine-refined .vettiver-horse-mark{
  width:58px;
  height:58px;
  display:block;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

body.silento-engine-refined .house-mark-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  padding-top:18px;
  margin-top:18px;
  border-top:1px solid var(--soft-line);
}

body.silento-engine-refined .house-mark-cluster{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

body.silento-engine-refined .house-mark-item{
  display:flex;
  align-items:center;
  gap:10px;
}

body.silento-engine-refined .house-mark-item img{
  display:block;
  object-fit:contain;
  background:transparent;
  box-shadow:none;
  border:0;
}

body.silento-engine-refined .house-mark-item--persifal img{
  width:52px;
  height:52px;
  border-radius:999px;
}

body.silento-engine-refined .house-mark-item--europe img,
body.silento-engine-refined .house-mark-item--finland img{
  width:auto;
  height:32px;
}

body.silento-engine-refined .house-mark-label{
  color:#aa9f87;
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.18em;
}

body.silento-engine-refined .house-mark-item--persifal .house-mark-label{
  display:none;
}

@media(max-width:900px){
  body.silento-engine-refined .engine-card-grid{
    grid-template-columns:64px minmax(0,1fr);
  }

  body.silento-engine-refined .model-link{
    grid-column:2;
    justify-content:flex-start;
    margin-top:4px;
  }

  body.silento-engine-refined .house-mark-row{
    justify-content:flex-start;
  }
}
/* === END SILENTO_ENGINE_MARKS_PATCH_20260807 === */


/* === SILENTO_VETTIVER_HORSE_REFINEMENT_20260807 === */

.vettiver-horse-logo{
  display:block;
  width:72px;
  height:72px;
}

.real-hattara-mark,
.portal-model-mark.mark-hattara.real-hattara-mark{
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.real-hattara-mark::before,
.real-hattara-mark::after,
.portal-model-mark.mark-hattara::before,
.portal-model-mark.mark-hattara::after{
  content:none !important;
  display:none !important;
}

/* === END SILENTO_VETTIVER_HORSE_REFINEMENT_20260807 === */

/* === SILENTO_PORTAL_REFINEMENT_20260807 === */

/* 1) animated first-screen accents with ghostly yellow neon */
.portal-shell,
.portal-stage,
.portal-house,
.portal-home,
.portal-landing,
.portal-hero{
  position:relative;
  overflow:hidden;
}

.portal-shell::before,
.portal-stage::before,
.portal-house::before,
.portal-home::before,
.portal-landing::before,
.portal-hero::before{
  content:"";
  position:absolute;
  inset:-8%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,227,150,.13) 0%, rgba(255,227,150,0) 24%),
    radial-gradient(circle at 76% 16%, rgba(255,214,120,.09) 0%, rgba(255,214,120,0) 22%),
    radial-gradient(circle at 58% 72%, rgba(255,239,173,.05) 0%, rgba(255,239,173,0) 26%),
    linear-gradient(90deg,
      rgba(84,132,186,0) 0%,
      rgba(104,160,220,.055) 22%,
      rgba(255,224,132,.075) 48%,
      rgba(92,151,210,.05) 76%,
      rgba(84,132,186,0) 100%);
  filter: blur(28px) saturate(112%);
  mix-blend-mode:screen;
  opacity:.95;
  animation:silentoGhostGlow 15s ease-in-out infinite alternate;
}

.portal-shell::after,
.portal-stage::after,
.portal-house::after,
.portal-home::after,
.portal-landing::after,
.portal-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(104deg,
      rgba(255,230,155,0) 0%,
      rgba(255,230,155,.055) 18%,
      rgba(255,230,155,0) 34%),
    linear-gradient(96deg,
      rgba(255,245,195,0) 38%,
      rgba(255,245,195,.03) 50%,
      rgba(255,245,195,0) 63%);
  opacity:.72;
  transform:translate3d(0,0,0);
  animation:silentoLightSweep 19s cubic-bezier(.45,.05,.2,.95) infinite;
}

.portal-shell > *,
.portal-stage > *,
.portal-house > *,
.portal-home > *,
.portal-landing > *,
.portal-hero > *{
  position:relative;
  z-index:1;
}

@keyframes silentoGhostGlow{
  0%{
    transform:translate3d(-1.5%, -1.2%, 0) scale(1.00);
    opacity:.72;
  }
  50%{
    transform:translate3d(1.2%, .6%, 0) scale(1.04);
    opacity:.98;
  }
  100%{
    transform:translate3d(-.6%, 1.8%, 0) scale(1.02);
    opacity:.82;
  }
}

@keyframes silentoLightSweep{
  0%{
    transform:translateX(-4%) translateY(0);
    opacity:.24;
  }
  50%{
    transform:translateX(2%) translateY(-1%);
    opacity:.46;
  }
  100%{
    transform:translateX(6%) translateY(1%);
    opacity:.26;
  }
}

/* 2) better provisional Vettiver mark */
.portal-model-mark.mark-vettiver.provisional-vettiver-mark{
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

.portal-model-mark.mark-vettiver.provisional-vettiver-mark::before,
.portal-model-mark.mark-vettiver.provisional-vettiver-mark::after{
  content:none !important;
  display:none !important;
}

.vettiver-horse-logo{
  display:block;
  width:78px;
  height:78px;
  overflow:visible;
  filter:
    drop-shadow(0 0 10px rgba(233,223,196,.12))
    drop-shadow(0 10px 22px rgba(34,44,34,.24));
}

/* 3) make model copy cleaner */
.portal-model-card p,
.portal-model-copy p{
  letter-spacing:.01em;
}

/* === END SILENTO_PORTAL_REFINEMENT_20260807 === */


/* === SILENTO_SEMANTIC_LABELS_20260807 === */

/*
   Main portal selectors:
   no box — they behave as editorial navigation labels.
*/
[data-panel="about-panel"].semantic-portal-label,
[data-panel="models-panel"].semantic-portal-label{
  position:relative !important;

  width:auto !important;
  min-width:0 !important;
  min-height:0 !important;

  display:inline-flex !important;
  align-itemsmodels-panel"].semantic-portal-label{
  position:relative !important;

  width:auto !important;
  min-width:0:baseline !important;
  justify-content:flex-start !important;
  gap:24px !important;

  margin:0 !important;
  padding:16px 4px 18px !important;

  appearance:none !important;
  -webkit-appearance:none !important;

  background:none !important;
  background-color:transparent !important;
  background-image:none !important;

  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;

  color:#e9dfc7 !important;
  text-align:left !important;

  cursor:pointer !important;
  overflow:visible !important;

  transform:none !important;
  transition:
    opacity .25s ease,
    transform .25s ease !important;
}


/* Remove old decorative box layers */
[data-panel="about-panel"].semantic-portal-label::before,
[data-panel="models-panel"].semantic-portal-label::before{
  content:"" !important;

  position:absolute !important;
  left:4px !important;
  bottom:7px !important;

  width:5px !important;
  height:5px !important;

  border:0 !important;
  border-radius:50% !important;

  background:#7f916f !important;

  opacity:.32 !important;

  box-shadow:
    0 0 0 rgba(230,216,125,0),
    0 0 0 rgba(230,216,125,0) !important;

  transform:scale(.72) !important;

  transition:
    opacity .28s ease,
    transform .28s ease,
    box-shadow .35s ease,
    background .28s ease !important;
}


/* The semantic line */
[data-panel="about-panel"].semantic-portal-label::after,
[data-panel="models-panel"].semantic-portal-label::after{
  content:"" !important;

  position:absolute !important;
  left:20px !important;
  bottom:9px !important;

  width:86px !important;
  height:1px !important;

  border:0 !important;
  border-radius:999px !important;

  background:linear-gradient(
    90deg,
    rgba(128,146,111,.70),
    rgba(229,218,177,.28),
    rgba(229,218,177,0)
  ) !important;

  opacity:.42 !important;
  transform:scaleX(.46) !important;
  transform-origin:left center !important;

  box-shadow:none !important;

  transition:
    width .38s cubic-bezier(.22,.61,.36,1),
    transform .38s cubic-bezier(.22,.61,.36,1),
    opacity .3s ease,
    box-shadow .35s ease !important;
}


/* Existing number — 01 / 02 */
[data-panel="about-panel"].semantic-portal-label > span,
[data-panel="models-panel"].semantic-portal-label > span{
  color:#77896a !important;

  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important;
  font-size:1rem !important;
  font-weight:600 !important;

  letter-spacing:.22em !important;
  line-height:1 !important;

  opacity:.88 !important;

  transition:
    color .28s ease,
    text-shadow .35s ease,
    opacity .28s ease !important;
}


/* Main wording */
[data-panel="about-panel"].semantic-portal-label strong,
[data-panel="models-panel"].semantic-portal-label strong{
  color:#e9dfc7 !important;

  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important;
  font-size:1.55rem !important;
  font-weight:650 !important;

  line-height:1 !important;
  letter-spacing:.18em !important;

  text-shadow:none !important;

  transition:
    color .28s ease,
    text-shadow .35s ease,
    transform .28s ease !important;
}


/* Hover: very restrained preview of activation */
[data-panel="about-panel"].semantic-portal-label:hover,
[data-panel="models-panel"].semantic-portal-label:hover{
  transform:translateY(-1px) !important;
}

[data-panel="about-panel"].semantic-portal-label:hover::after,
[data-panel="models-panel"].semantic-portal-label:hover::after{
  width:126px !important;
  transform:scaleX(.78) !important;
  opacity:.72 !important;
}


/* CLICKED / ACTIVE semantic cue */
[data-panel="about-panel"].semantic-portal-label.is-semantic-active::before,
[data-panel="models-panel"].semantic-portal-label.is-semantic-active::before{
  background:#e4d87c !important;

  opacity:.96 !important;
  transform:scale(1) !important;

  box-shadow:
    0 0 7px rgba(235,218,105,.78),
    0 0 19px rgba(235,218,105,.32),
    0 0 38px rgba(151,169,102,.18) !important;
}


[data-panel="about-panel"].semantic-portal-label.is-semantic-active::after,
[data-panel="models-panel"].semantic-portal-label.is-semantic-active::after{
  width:156px !important;
  transform:scaleX(1) !important;
  opacity:.95 !important;

  background:linear-gradient(
    90deg,
    rgba(228,216,124,.96),
    rgba(154,171,113,.70),
    rgba(231,221,190,.12),
    rgba(231,221,190,0)
  ) !important;

  box-shadow:
    0 0 8px rgba(226,213,116,.18),
    0 0 22px rgba(172,190,117,.10) !important;
}


[data-panel="about-panel"].semantic-portal-label.is-semantic-active > span,
[data-panel="models-panel"].semantic-portal-label.is-semantic-active > span{
  color:#a0b28b !important;
  opacity:1 !important;

  text-shadow:
    0 0 13px rgba(156,180,119,.22) !important;
}


[data-panel="about-panel"].semantic-portal-label.is-semantic-active strong,
[data-panel="models-panel"].semantic-portal-label.is-semantic-active strong{
  color:#fff0cf !important;

  text-shadow:
    0 0 17px rgba(235,219,154,.12) !important;
}


@media(max-width:700px){

  [data-panel="about-panel"].semantic-portal-label,
  [data-panel="models-panel"].semantic-portal-label{
    gap:16px !important;
    padding:13px 2px 17px !important;
  }

  [data-panel="about-panel"].semantic-portal-label strong,
  [data-panel="models-panel"].semantic-portal-label strong{
    font-size:1.18rem !important;
    letter-spacing:.14em !important;
  }

}

/* === END SILENTO_SEMANTIC_LABELS_20260807 === */


/* === SILENTO_NEON_TEXT_LABELS_FINAL_20260807 === */

/* No boxes */
[data-panel="about-panel"],
[data-panel="models-panel"]{
  width:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:12px 0 16px !important;
  margin:0 !important;

  background:transparent !important;
  background-image:none !important;

  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;
  box-shadow:none !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;

  position:relative !important;
  overflow:visible !important;
}

/* Remove 01 / 02 */
[data-panel="about-panel"] > span,
[data-panel="models-panel"] > span{
  display:none !important;
}

/* Neon-yellow typography */
[data-panel="about-panel"] strong,
[data-panel="models-panel"] strong{
  color:#f1e96f !important;

  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important;
  font-size:1.7rem !important;
  font-weight:650 !important;
  line-height:1 !important;

  letter-spacing:.16em !important;
  text-transform:uppercase !important;

  text-shadow:
    0 0 5px rgba(245,235,105,.28),
    0 0 13px rgba(235,222,92,.16),
    0 0 28px rgba(196,210,92,.08) !important;

  transition:
    color .25s ease,
    text-shadow .3s ease,
    transform .25s ease !important;
}

/* Remove any old dot */
[data-panel="about-panel"]::before,
[data-panel="models-panel"]::before{
  content:none !important;
  display:none !important;
}

/* Semantic line cue */
[data-panel="about-panel"]::after,
[data-panel="models-panel"]::after{
  content:"" !important;

  position:absolute !important;
  left:0 !important;
  bottom:3px !important;

  width:38px !important;
  height:1px !important;

  background:linear-gradient(
    90deg,
    rgba(241,233,111,.95),
    rgba(174,194,104,.50),
    transparent
  ) !important;

  border:0 !important;
  border-radius:999px !important;

  box-shadow:
    0 0 7px rgba(241,233,111,.20) !important;

  transition:
    width .35s ease,
    box-shadow .35s ease,
    opacity .35s ease !important;
}

/* Hover / selected state */
[data-panel="about-panel"]:hover strong,
[data-panel="models-panel"]:hover strong,
[data-panel="about-panel"].is-semantic-active strong,
[data-panel="models-panel"].is-semantic-active strong{
  color:#fff79a !important;

  text-shadow:
    0 0 7px rgba(255,244,128,.50),
    0 0 17px rgba(239,226,89,.28),
    0 0 34px rgba(194,212,99,.16) !important;
}

[data-panel="about-panel"]:hover::after,
[data-panel="models-panel"]:hover::after,
[data-panel="about-panel"].is-semantic-active::after,
[data-panel="models-panel"].is-semantic-active::after{
  width:100% !important;

  box-shadow:
    0 0 8px rgba(245,233,107,.34),
    0 0 20px rgba(197,214,102,.15) !important;
}

/* === END SILENTO_NEON_TEXT_LABELS_FINAL_20260807 === */

/* === SILENTO_PORTAL_GREEN_NUMBERS_NEON_ACCENT_20260807 === */

[data-panel="about-panel"],
[data-panel="models-panel"]{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 10px 0 18px !important;
  min-height: auto !important;
  min-width: auto !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 22px !important;
  position: relative !important;
  overflow: visible !important;
}

/* bring back 01 / 02 */
[data-panel="about-panel"] > span,
[data-panel="models-panel"] > span{
  display: inline-block !important;
  color: #7f9273 !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  opacity: .95 !important;
  text-shadow:
    0 0 6px rgba(170, 190, 120, .10) !important;
}

/* main label */
[data-panel="about-panel"] strong,
[data-panel="models-panel"] strong{
  display: inline-block !important;
  color: #efe6cf !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 2.05rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 10px rgba(241, 233, 111, .06),
    0 0 22px rgba(241, 233, 111, .03) !important;
  transition:
    color .25s ease,
    text-shadow .3s ease,
    transform .25s ease !important;
}

/* remove stray dot */
[data-panel="about-panel"]::before,
[data-panel="models-panel"]::before{
  content: none !important;
  display: none !important;
}

/* neon accent line */
[data-panel="about-panel"]::after,
[data-panel="models-panel"]::after{
  content: "" !important;
  position: absolute !important;
  left: 28px !important;
  right: 0 !important;
  bottom: 2px !important;
  width: 64px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    rgba(241,233,111,.95),
    rgba(225,214,98,.72),
    rgba(241,233,111,0)
  ) !important;
  box-shadow:
    0 0 8px rgba(241,233,111,.20),
    0 0 20px rgba(241,233,111,.10) !important;
  transition:
    width .32s ease,
    box-shadow .32s ease,
    opacity .32s ease !important;
}

/* hover / active */
[data-panel="about-panel"]:hover strong,
[data-panel="models-panel"]:hover strong,
[data-panel="about-panel"].is-semantic-active strong,
[data-panel="models-panel"].is-semantic-active strong{
  color: #fff4c8 !important;
  text-shadow:
    0 0 10px rgba(255,240,140,.16),
    0 0 22px rgba(241,233,111,.10) !important;
}

[data-panel="about-panel"]:hover::after,
[data-panel="models-panel"]:hover::after,
[data-panel="about-panel"].is-semantic-active::after,
[data-panel="models-panel"].is-semantic-active::after{
  width: 150px !important;
  box-shadow:
    0 0 10px rgba(241,233,111,.28),
    0 0 24px rgba(241,233,111,.14) !important;
}

/* === END SILENTO_PORTAL_GREEN_NUMBERS_NEON_ACCENT_20260807 === */


/* === SILENTO_SHOOTING_NEON_ACCENT_20260807 === */

/* moving light particle */
[data-panel="about-panel"].is-shooting::before,
[data-panel="models-panel"].is-shooting::before{
  content:"" !important;
  display:block !important;

  position:absolute !important;
  bottom:0px !important;
  left:28px !important;

  width:38px !important;
  height:3px !important;

  border-radius:999px !important;

  background:linear-gradient(
    90deg,
    rgba(255,247,160,0),
    rgba(255,247,160,.55),
    #fff7a0
  ) !important;

  box-shadow:
    0 0 6px rgba(255,245,139,.80),
    0 0 14px rgba(244,231,103,.48),
    0 0 30px rgba(205,218,103,.24) !important;

  opacity:0;

  animation:silentoShootingAccent .72s
            cubic-bezier(.18,.72,.18,1)
            1 forwards !important;

  pointer-events:none !important;
  z-index:4 !important;
}

@keyframes silentoShootingAccent{

  0%{
    left:28px;
    width:8px;
    opacity:0;
  }

  12%{
    opacity:1;
  }

  42%{
    width:48px;
    opacity:1;
  }

  78%{
    opacity:.9;
  }

  100%{
    left:calc(100% - 10px);
    width:5px;
    opacity:0;
  }
}

/* tiny flash at the end of the run */
[data-panel="about-panel"].is-shooting strong,
[data-panel="models-panel"].is-shooting strong{
  animation:silentoLabelFlash .72s ease-out 1;
}

@keyframes silentoLabelFlash{
  0%,100%{
    text-shadow:
      0 0 10px rgba(255,240,140,.12);
  }

  55%{
    text-shadow:
      0 0 8px rgba(255,247,156,.46),
      0 0 20px rgba(242,228,96,.24),
      0 0 38px rgba(199,216,102,.13);
  }
}

/* === END SILENTO_SHOOTING_NEON_ACCENT_20260807 === */

/* === SILENTO_REAL_SHOOTING_STAR_ACCENT_20260807 === */

/*
   Kill the previous extra moving object.
   There is NO second particle.
*/
[data-panel="about-panel"].is-shooting::before,
[data-panel="models-panel"].is-shooting::before{
  content:none !important;
  display:none !important;
  animation:none !important;
}


/*
   Normal resting accent.
*/
[data-panel="about-panel"]::after,
[data-panel="models-panel"]::after{
  left:28px !important;
  bottom:2px !important;

  width:64px !important;
  height:1px !important;

  opacity:.72 !important;

  background:linear-gradient(
    90deg,
    rgba(241,233,111,.88) 0%,
    rgba(218,216,112,.48) 52%,
    rgba(218,216,112,0) 100%
  ) !important;

  box-shadow:
    0 0 6px rgba(241,233,111,.14),
    0 0 14px rgba(190,207,98,.07) !important;

  transform:translateX(0) !important;
}


/*
   CLICK:
   the existing accent itself becomes the shooting star.
*/
[data-panel="about-panel"].is-shooting::after,
[data-panel="models-panel"].is-shooting::after{
  animation:
    silentoAccentBecomesStar .78s
    cubic-bezier(.18,.74,.18,1)
    1 both !important;
}


/*
   The right side is the brilliant head.
   The long translucent part behind it is the tail.
*/
@keyframes silentoAccentBecomesStar{

  0%{
    width:64px;
    height:1px;

    transform:translateX(0) scaleX(1);

    opacity:.72;

    background:linear-gradient(
      90deg,
      rgba(241,233,111,.76) 0%,
      rgba(222,219,111,.40) 58%,
      rgba(222,219,111,0) 100%
    );

    box-shadow:
      0 0 5px rgba(241,233,111,.12);
  }


  /* line tightens and starts becoming a comet */
  17%{
    width:54px;
    height:2px;

    transform:translateX(8px) scaleX(.88);

    opacity:1;

    background:linear-gradient(
      90deg,
      rgba(255,247,146,0) 0%,
      rgba(239,231,105,.22) 30%,
      rgba(247,239,122,.62) 72%,
      #fff8a8 100%
    );

    box-shadow:
      0 0 5px rgba(255,246,144,.40),
      0 0 14px rgba(239,227,91,.18);
  }


  /* full shooting-star streak */
  48%{
    width:78px;
    height:2px;

    transform:translateX(82px) scaleX(1);

    opacity:1;

    background:linear-gradient(
      90deg,
      rgba(255,247,148,0) 0%,
      rgba(235,228,103,.08) 12%,
      rgba(240,231,103,.28) 48%,
      rgba(255,242,123,.74) 82%,
      #fffbd0 96%,
      #ffffff 100%
    );

    box-shadow:
      4px 0 7px rgba(255,252,199,.72),
      9px 0 18px rgba(247,235,104,.34),
      14px 0 34px rgba(191,210,94,.16);
  }


  /* it crosses the rest of the selected label */
  78%{
    width:62px;
    height:2px;

    transform:translateX(168px) scaleX(.78);

    opacity:.88;

    background:linear-gradient(
      90deg,
      rgba(240,230,103,0) 0%,
      rgba(240,230,103,.12) 38%,
      rgba(255,242,125,.66) 82%,
      #fffbd0 100%
    );

    box-shadow:
      5px 0 8px rgba(255,248,158,.54),
      10px 0 22px rgba(235,224,91,.20);
  }


  /* head disappears off the side */
  100%{
    width:24px;
    height:1px;

    transform:translateX(230px) scaleX(.35);

    opacity:0;

    background:linear-gradient(
      90deg,
      transparent,
      rgba(255,246,145,.32),
      #fffbd0
    );

    box-shadow:
      5px 0 10px rgba(255,244,136,.18);
  }
}


/*
   Do NOT flash the label itself.
   Only the accent moves.
*/
[data-panel="about-panel"].is-shooting strong,
[data-panel="models-panel"].is-shooting strong{
  animation:none !important;
}

/* === END SILENTO_REAL_SHOOTING_STAR_ACCENT_20260807 === */

/* === SILENTO_FLASHY_ACCENT_AND_NO_MODEL_BOXES_20260807 === */

/* ---------------------------------
   1) FASTER / FLASHIER CLICK ACCENT
   --------------------------------- */

[data-panel="about-panel"]::after,
[data-panel="models-panel"]::after{
  transition:none !important;
  background:linear-gradient(
    90deg,
    rgba(233,227,118,.95) 0%,
    rgba(241,236,133,.70) 45%,
    rgba(245,239,148,.20) 78%,
    rgba(245,239,148,0) 100%
  ) !important;
  box-shadow:
    0 0 8px rgba(245,236,125,.28),
    0 0 18px rgba(245,236,125,.18),
    0 0 36px rgba(196,208,112,.10) !important;
}

[data-panel="about-panel"].is-shooting::before,
[data-panel="models-panel"].is-shooting::before{
  content:none !important;
  display:none !important;
}

[data-panel="about-panel"].is-shooting::after,
[data-panel="models-panel"].is-shooting::after{
  animation:silentoAccentFlashRun .42s cubic-bezier(.16,.84,.22,1) 1 both !important;
}

@keyframes silentoAccentFlashRun{
  0%{
    width:64px;
    height:1px;
    opacity:.85;
    transform:translateX(0) scaleX(1);
    background:linear-gradient(
      90deg,
      rgba(233,227,118,.92) 0%,
      rgba(241,236,133,.58) 55%,
      rgba(245,239,148,0) 100%
    );
    box-shadow:
      0 0 7px rgba(245,236,125,.24);
  }

  16%{
    width:74px;
    height:2px;
    opacity:1;
    transform:translateX(24px) scaleX(1.08);
    background:linear-gradient(
      90deg,
      rgba(255,248,173,0) 0%,
      rgba(245,236,125,.20) 28%,
      rgba(255,242,138,.78) 82%,
      rgba(255,255,235,1) 100%
    );
    box-shadow:
      8px 0 10px rgba(255,249,186,.85),
      14px 0 22px rgba(245,236,125,.42),
      18px 0 38px rgba(201,219,107,.18);
  }

  44%{
    width:112px;
    height:2px;
    opacity:1;
    transform:translateX(128px) scaleX(1);
    background:linear-gradient(
      90deg,
      rgba(255,248,173,0) 0%,
      rgba(245,236,125,.08) 18%,
      rgba(245,236,125,.22) 42%,
      rgba(255,242,138,.70) 82%,
      rgba(255,255,240,1) 100%
    );
    box-shadow:
      10px 0 10px rgba(255,255,225,.95),
      18px 0 28px rgba(255,242,138,.44),
      24px 0 46px rgba(196,208,112,.22);
  }

  78%{
    width:70px;
    height:2px;
    opacity:.96;
    transform:translateX(232px) scaleX(.82);
    background:linear-gradient(
      90deg,
      rgba(255,248,173,0) 0%,
      rgba(245,236,125,.14) 38%,
      rgba(255,242,138,.72) 88%,
      rgba(255,255,242,1) 100%
    );
    box-shadow:
      10px 0 10px rgba(255,248,173,.75),
      18px 0 26px rgba(245,236,125,.30);
  }

  100%{
    width:20px;
    height:1px;
    opacity:0;
    transform:translateX(290px) scaleX(.22);
    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,242,138,.32) 65%,
      rgba(255,255,240,.90) 100%
    );
    box-shadow:
      8px 0 10px rgba(255,243,150,.16);
  }
}

/* ---------------------------------
   2) REMOVE BOXES AROUND MODEL ITEMS
   --------------------------------- */

/* target the right panel cards in a tolerant way */
.model-card,
.house-model-card,
.engine-card,
.portal-model-card,
.models-panel-card,
.models-drawer-card,
[data-model-card]{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* if the card has an inner shell, strip that too */
.model-card::before,
.model-card::after,
.house-model-card::before,
.house-model-card::after,
.engine-card::before,
.engine-card::after,
.portal-model-card::before,
.portal-model-card::after,
.models-panel-card::before,
.models-panel-card::after,
.models-drawer-card::before,
.models-drawer-card::after,
[data-model-card]::before,
[data-model-card]::after{
  box-shadow:none !important;
}

/* keep spacing elegant after removing the boxes */
.model-card + .model-card,
.house-model-card + .house-model-card,
.engine-card + .engine-card,
.portal-model-card + .portal-model-card,
.models-panel-card + .models-panel-card,
.models-drawer-card + .models-drawer-card,
[data-model-card] + [data-model-card]{
  margin-top:18px !important;
  padding-top:18px !important;
  border-top:1px solid rgba(230,223,190,.10) !important;
}

/* optional: make the right panel breathe more */
.models-panel,
.portal-models-panel,
.house-models-panel,
[data-panel-shell="models"],
[data-house-panel="models"]{
  background:transparent !important;
}

/* === END SILENTO_FLASHY_ACCENT_AND_NO_MODEL_BOXES_20260807 === */


/* === SILENTO_VISIBLE_STAR_AND_REAL_MODEL_NOBOX_20260807 === */


/* =========================================================
   CLICK ACCENT:
   THE RESTING LINE ITSELF BECOMES THE SHOOTING STAR
   ========================================================= */

[data-panel="about-panel"]::after,
[data-panel="models-panel"]::after{
  content:"" !important;

  position:absolute !important;
  left:28px !important;
  bottom:2px !important;

  width:64px !important;
  height:1px !important;

  opacity:.78 !important;

  border:0 !important;
  border-radius:999px !important;

  background:linear-gradient(
    90deg,
    rgba(240,232,111,.94),
    rgba(216,219,112,.48),
    rgba(216,219,112,0)
  ) !important;

  box-shadow:
    0 0 7px rgba(241,233,111,.18),
    0 0 16px rgba(196,211,103,.08) !important;

  transform:none !important;
  transition:none !important;
}


[data-panel="about-panel"].is-shooting::before,
[data-panel="models-panel"].is-shooting::before{
  content:none !important;
  display:none !important;
}


[data-panel="about-panel"].is-shooting::after,
[data-panel="models-panel"].is-shooting::after{
  animation:
    silentoTrueFastStar .34s
    cubic-bezier(.12,.80,.18,1)
    1 both !important;
}


@keyframes silentoTrueFastStar{

  0%{
    left:28px;
    width:64px;
    height:1px;

    opacity:.76;

    background:linear-gradient(
      90deg,
      rgba(240,232,111,.92),
      rgba(220,221,112,.44),
      transparent
    );

    box-shadow:
      0 0 6px rgba(242,234,117,.16);
  }


  12%{
    left:31px;
    width:88px;
    height:2px;

    opacity:1;

    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(238,228,92,.12) 25%,
      rgba(251,239,118,.64) 72%,
      #fff6a2 92%,
      #fffde6 100%
    );

    box-shadow:
      5px 0 8px rgba(255,253,215,.82),
      10px 0 18px rgba(250,236,108,.44),
      18px 0 36px rgba(203,219,106,.22);
  }


  38%{
    left:36%;
    width:106px;
    height:2px;

    opacity:1;

    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(237,228,91,.06) 18%,
      rgba(242,231,95,.20) 42%,
      rgba(255,240,116,.72) 78%,
      #fff8ad 94%,
      #ffffff 100%
    );

    box-shadow:
      7px 0 9px rgba(255,255,236,.96),
      14px 0 22px rgba(255,240,116,.54),
      24px 0 44px rgba(206,222,105,.26);
  }


  68%{
    left:calc(100% - 88px);
    width:82px;
    height:2px;

    opacity:1;

    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(241,230,94,.10) 32%,
      rgba(255,241,119,.62) 76%,
      #fff9b7 94%,
      #ffffff 100%
    );

    box-shadow:
      8px 0 10px rgba(255,255,235,.94),
      16px 0 25px rgba(255,238,108,.46),
      25px 0 46px rgba(198,216,99,.22);
  }


  100%{
    left:calc(100% + 8px);
    width:12px;
    height:1px;

    opacity:0;

    background:linear-gradient(
      90deg,
      transparent,
      #fff8ad
    );

    box-shadow:
      7px 0 13px rgba(255,243,128,.20);
  }
}


/* Do not flash the words themselves */
[data-panel="about-panel"].is-shooting strong,
[data-panel="models-panel"].is-shooting strong{
  animation:none !important;
}


/* =========================================================
   ACTUAL MODEL ITEMS:
   THESE ARE .portal-model IN YOUR CURRENT HTML
   ========================================================= */

#models-panel .portal-model-list{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;

  margin-top:18px !important;
}


#models-panel .portal-model{
  background:transparent !important;
  background-image:none !important;

  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;

  box-shadow:none !important;

  margin:0 !important;
  padding:30px 4px !important;

  position:relative !important;

  transition:
    transform .24s ease,
    opacity .24s ease !important;
}


/* remove any decorative card layers */
#models-panel .portal-model::before,
#models-panel .portal-model::after{
  content:none !important;
  display:none !important;

  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}


/* Only a quiet separator between the two engines */
#models-panel .portal-model + .portal-model{
  border-top:1px solid rgba(232,223,199,.10) !important;
}


/* no box on hover either */
#models-panel .portal-model:hover{
  background:transparent !important;
  box-shadow:none !important;
  transform:translateX(4px) !important;
}


/* keep copy and marks clean */
#models-panel .portal-model-mark{
  flex:0 0 auto !important;
}

#models-panel .portal-model-copy{
  position:relative !important;
  z-index:1 !important;
}


/* === END SILENTO_VISIBLE_STAR_AND_REAL_MODEL_NOBOX_20260807 === */


/* === SILENTO_SHOOTING_STAR_FLASH_X10_20260807 === */

[data-panel="about-panel"].is-shooting::after,
[data-panel="models-panel"].is-shooting::after{
  animation:
    silentoTrueFastStarX10 .34s
    cubic-bezier(.10,.82,.14,1)
    1 both !important;

  filter:
    brightness(2.8)
    saturate(1.45)
    drop-shadow(0 0 5px rgba(255,255,230,1))
    drop-shadow(0 0 15px rgba(255,239,94,.95))
    drop-shadow(0 0 36px rgba(238,225,62,.65))
    drop-shadow(0 0 70px rgba(197,218,76,.36)) !important;
}

@keyframes silentoTrueFastStarX10{

  0%{
    left:28px;
    width:64px;
    height:1px;
    opacity:.82;

    background:linear-gradient(
      90deg,
      rgba(248,239,105,.96) 0%,
      rgba(239,230,92,.58) 55%,
      rgba(239,230,92,0) 100%
    );

    box-shadow:
      0 0 12px rgba(255,244,118,.55),
      0 0 28px rgba(239,226,70,.30) !important;
  }

  10%{
    left:31px;
    width:92px;
    height:3px;
    opacity:1;

    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,235,66,.16) 24%,
      rgba(255,239,88,.60) 60%,
      rgba(255,248,147,.96) 84%,
      #fffbd4 94%,
      #ffffff 100%
    );

    box-shadow:
      8px 0 12px rgba(255,255,255,1),
      14px 0 26px rgba(255,247,145,.98),
      22px 0 48px rgba(255,232,62,.82),
      30px 0 88px rgba(215,225,74,.48) !important;
  }

  34%{
    left:34%;
    width:128px;
    height:3px;
    opacity:1;

    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,229,50,.06) 14%,
      rgba(255,232,58,.24) 38%,
      rgba(255,239,87,.72) 66%,
      rgba(255,249,160,.98) 84%,
      #fffde6 94%,
      #ffffff 100%
    );

    box-shadow:
      10px 0 14px rgba(255,255,255,1),
      18px 0 32px rgba(255,252,185,1),
      28px 0 60px rgba(255,234,58,.92),
      40px 0 105px rgba(207,224,66,.56),
      55px 0 150px rgba(183,205,72,.28) !important;
  }

  58%{
    left:67%;
    width:116px;
    height:3px;
    opacity:1;

    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,230,47,.08) 18%,
      rgba(255,235,64,.34) 46%,
      rgba(255,242,102,.80) 72%,
      rgba(255,251,187,1) 90%,
      #ffffff 100%
    );

    box-shadow:
      10px 0 16px rgba(255,255,255,1),
      20px 0 36px rgba(255,250,165,1),
      32px 0 68px rgba(255,232,50,.88),
      46px 0 112px rgba(209,225,65,.50) !important;
  }

  80%{
    left:calc(100% - 72px);
    width:74px;
    height:3px;
    opacity:1;

    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,232,55,.18) 38%,
      rgba(255,242,102,.88) 76%,
      #fffbd1 93%,
      #ffffff 100%
    );

    box-shadow:
      10px 0 14px rgba(255,255,255,1),
      20px 0 34px rgba(255,246,132,.92),
      30px 0 64px rgba(252,229,49,.70),
      42px 0 100px rgba(200,219,67,.40) !important;
  }

  100%{
    left:calc(100% + 10px);
    width:10px;
    height:2px;
    opacity:0;

    background:#ffffff;

    box-shadow:
      8px 0 18px rgba(255,255,255,.75),
      18px 0 42px rgba(255,235,78,.50) !important;
  }
}

/* === END SILENTO_SHOOTING_STAR_FLASH_X10_20260807 === */

/* === SILENTO STRIPE CHECKOUT 20260828 === */
.silento-payment-box{
  margin:28px 0;
  padding:24px;
  border:1px solid rgba(35,28,20,.22);
  border-radius:18px;
  background:rgba(247,239,218,.72);
}

.silento-payment-kicker{
  margin:0 0 5px;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.72;
}

.silento-payment-price{
  margin:0 0 4px;
  font-size:2rem;
  line-height:1;
}

.silento-payment-copy,
.silento-payment-note{
  opacity:.76;
}

.silento-buy-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:10px;
  text-decoration:none;
}

.silento-payment-note{
  margin:10px 0 0;
  font-size:.78rem;
}
/* === END SILENTO STRIPE CHECKOUT 20260828 === */

/* === SILENTO UPPER BUY NOW === */

.silento-upper-buy-wrap{
  display:block;
  margin-top:10px;
}

#silento-buy-now{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:9px 18px;

  border:1px solid rgba(112,220,255,.72);
  border-radius:9px;

  background:rgba(8,35,50,.92);
  color:#f4e8c8;

  font-size:11px;
  font-weight:700;
  letter-spacing:.11em;

  text-decoration:none;
  white-space:nowrap;

  box-shadow:
    0 0 0 1px rgba(80,200,240,.08),
    0 0 17px rgba(53,190,235,.16);

  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease;
}

#silento-buy-now:hover{
  transform:translateY(-1px);
  background:rgba(13,55,73,.98);
  border-color:#a3ebff;
}

/* === END SILENTO UPPER BUY NOW === */

/* === SILENTO POP BUBBLE BUY BUTTON === */

.silento-upper-buy-wrap{
  display:inline-block;
  margin-left:10px;
  vertical-align:middle;
}

#silento-buy-now{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:170px;
  min-height:54px;
  padding:0;
  border-radius:999px;
  text-decoration:none;
  overflow:hidden;
  isolation:isolate;

  border:1px solid rgba(255,244,223,.55);
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 24%),
    radial-gradient(circle at 72% 78%, rgba(255,205,150,.18), rgba(255,205,150,0) 36%),
    linear-gradient(135deg, #fff0d2 0%, #f6d48a 38%, #f0a85f 68%, #d97835 100%);
  box-shadow:
    0 0 0 1px rgba(255,247,235,.08),
    0 12px 28px rgba(0,0,0,.34),
    0 0 24px rgba(255,170,76,.22),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -6px 16px rgba(120,44,0,.16);

  transform-origin:center center;
  animation:silentoBuyBreath 2.8s ease-in-out infinite;
}

#silento-buy-now:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(255,248,236,.14),
    0 14px 32px rgba(0,0,0,.36),
    0 0 34px rgba(255,176,84,.34),
    0 0 54px rgba(255,135,40,.15),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -6px 16px rgba(120,44,0,.16);
}

#silento-buy-now:active{
  transform:translateY(1px) scale(.985);
}

.buy-bubble-shine{
  position:absolute;
  inset:auto auto 58% 8%;
  width:58%;
  height:34%;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.08));
  filter:blur(1px);
  opacity:.72;
  z-index:0;
  pointer-events:none;
}

.buy-bubble-content{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 18px 11px 18px;
}

.buy-bubble-kicker{
  display:none;
}

.buy-bubble-main{
  color:#442100;
  font-size:12px;
  line-height:1;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.28);
}

.buy-bubble-price{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  height:28px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(22,17,14,.18);
  border:1px solid rgba(91,44,0,.18);
  color:#fff7eb;
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 2px 8px rgba(80,30,0,.16);
}

@keyframes silentoBuyBreath{
  0%{
    transform:scale(1);
    box-shadow:
      0 0 0 1px rgba(255,247,235,.08),
      0 12px 28px rgba(0,0,0,.34),
      0 0 18px rgba(255,170,76,.18),
      inset 0 1px 0 rgba(255,255,255,.42),
      inset 0 -6px 16px rgba(120,44,0,.16);
  }
  50%{
    transform:scale(1.035);
    box-shadow:
      0 0 0 1px rgba(255,247,235,.14),
      0 15px 34px rgba(0,0,0,.38),
      0 0 36px rgba(255,175,70,.30),
      0 0 56px rgba(255,140,70,.12),
      inset 0 1px 0 rgba(255,255,255,.50),
      inset 0 -6px 16px rgba(120,44,0,.16);
  }
  100%{
    transform:scale(1);
    box-shadow:
      0 0 0 1px rgba(255,247,235,.08),
      0 12px 28px rgba(0,0,0,.34),
      0 0 18px rgba(255,170,76,.18),
      inset 0 1px 0 rgba(255,255,255,.42),
      inset 0 -6px 16px rgba(120,44,0,.16);
  }
}

/* Slightly tighter on small screens */
@media (max-width: 900px){
  .silento-upper-buy-wrap{
    display:block;
    margin-left:0;
    margin-top:12px;
  }
}

/* === END SILENTO POP BUBBLE BUY BUTTON === */




/* zoom into the physical Daruma, not the full poster */
  width: 225% !important;
  height: 225% !important;
  max-width: none !important;

  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -45%) !important;

  object-fit: cover !important;
  object-position: 50% 34% !important;
}






/* DARUMA_22_CLEAN_FINAL */
.portal-model .portal-model-mark.portal-model-mark--daruma-app,
.portal-model .portal-model-mark.portal-model-mark--daruma-final,
.portal-model .portal-model-mark.portal-model-mark--daruma {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
}

.portal-model .portal-model-mark.portal-model-mark--daruma-app img,
.portal-model .portal-model-mark.portal-model-mark--daruma-final img,
.portal-model .portal-model-mark.portal-model-mark--daruma img {
    position: static !important;

    width: 64px !important;
    height: 64px !important;

    max-width: 64px !important;
    max-height: 64px !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform: none !important;

    border: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    box-shadow: none !important;
}


/* ==========================================================
   HATTARA JADE + GOLD HERO — APPROVED 20260909
   Scoped to Hattara only. Existing feature sections remain unchanged.
   ========================================================== */
body.hattara-page{
  --hattara-void:#050b0f;
  --hattara-void-2:#071216;
  --hattara-jade:#0b4f4a;
  --hattara-jade-soft:#126a61;
  --hattara-gold:#d0a65d;
  --hattara-gold-bright:#edcf88;
  --hattara-cream:#f0e3c5;
  background:
    radial-gradient(circle at 58% 50%, rgba(9,79,73,.09), transparent 34%),
    radial-gradient(circle at 18% 34%, rgba(14,91,82,.055), transparent 29%),
    linear-gradient(180deg,var(--hattara-void) 0%,var(--hattara-void-2) 55%,#04090c 100%);
}

body.hattara-page .silento-top{
  position:sticky;
  top:0;
  z-index:90;
  background:linear-gradient(180deg,rgba(5,11,15,.96),rgba(5,11,15,.78));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:rgba(208,166,93,.12);
}

body.hattara-page .brand-wordmark,
body.hattara-page .house-nav > a:hover,
body.hattara-page .nav-models > summary:hover{
  color:var(--hattara-cream);
}

body.hattara-page .house-nav > a,
body.hattara-page .nav-models > summary{
  color:#b9a985;
}

body.hattara-page .hattara-hero{
  position:relative;
  isolation:isolate;
  display:block;
  min-height:calc(100vh - 80px);
  overflow:hidden;
  padding-top:clamp(58px,7vh,88px);
  padding-bottom:76px;
  border-bottom:1px solid rgba(208,166,93,.08);
  opacity:1;
  transform:none;
  background:
    radial-gradient(circle at 59% 68%,rgba(9,84,76,.12),transparent 24%),
    radial-gradient(circle at 86% 42%,rgba(16,89,80,.07),transparent 22%);
}

body.hattara-page .hattara-hero::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.009) 1px,transparent 1px);
  background-size:54px 54px;
  opacity:.07;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 24%,#000 78%,transparent 100%);
}

body.hattara-page .hattara-hero-copy-block{
  position:relative;
  z-index:8;
  width:min(760px,54vw);
}

body.hattara-page .hattara-hero .over{
  color:#b8aa88;
  font-size:.68rem;
  letter-spacing:.24em;
}

body.hattara-page .hattara-hero h1{
  margin:12px 0 20px;
  color:var(--hattara-cream);
  font-size:clamp(52px,6.3vw,94px);
  line-height:.92;
  font-weight:650;
  letter-spacing:-.045em;
  text-shadow:0 12px 36px rgba(0,0,0,.25);
}

body.hattara-page .hattara-hero .hero-copy{
  max-width:700px;
  margin:0;
  color:#d4c9b0;
  font-size:clamp(.92rem,1.04vw,1.05rem);
  line-height:1.55;
}

body.hattara-page .hero-version-slot{
  margin-top:44px;
  width:min(560px,100%);
  max-width:560px;
}

body.hattara-page .version-menu{
  width:100%;
  margin:0;
  overflow:visible;
  border:1px solid rgba(237,207,136,.72);
  border-radius:18px;
  background:
    linear-gradient(90deg,rgba(10,77,71,.72),rgba(5,23,26,.90) 72%),
    rgba(5,18,21,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,245,210,.08),
    0 12px 34px rgba(0,0,0,.20),
    0 0 18px rgba(208,166,93,.05);
}

body.hattara-page .version-menu summary{
  min-height:60px;
  padding:0 22px;
  color:var(--hattara-cream);
}

body.hattara-page .version-menu summary span{
  color:#9bcfc0;
  letter-spacing:.22em;
}

body.hattara-page .version-menu summary strong{
  color:var(--hattara-cream);
  font-size:.94rem;
}

body.hattara-page .version-menu summary::after{
  content:"⌄";
  margin-left:18px;
  color:var(--hattara-gold-bright);
  font-size:1rem;
  line-height:1;
}

body.hattara-page .version-menu[open] summary::after{
  content:"⌃";
}

body.hattara-page .version-panel{
  position:absolute;
  z-index:120;
  left:0;
  right:0;
  top:calc(100% + 10px);
  padding:12px;
  border:1px solid rgba(208,166,93,.34);
  border-radius:16px;
  background:rgba(4,16,18,.97);
  box-shadow:0 22px 55px rgba(0,0,0,.48);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

body.hattara-page .version-panel > a{
  color:var(--hattara-cream);
}

body.hattara-page .version-panel > a:hover{
  background:rgba(13,91,81,.20);
  border-color:rgba(208,166,93,.28);
}

body.hattara-page .version-panel small,
body.hattara-page .version-kicker,
body.hattara-page .installer-preview span{
  color:#88baae !important;
}

body.hattara-page .hattara-cotton-stage{
  position:absolute;
  z-index:6;
  left:57.2%;
  top:64.5%;
  width:clamp(300px,27vw,430px);
  margin:0;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

body.hattara-page .hattara-cotton-stage .hero-sticker{
  width:100%;
  max-width:none;
}

body.hattara-page .hattara-cotton-stage img{
  width:100%;
  opacity:1;
  mix-blend-mode:normal;
  filter:
    saturate(1.05)
    drop-shadow(0 30px 45px rgba(0,0,0,.36))
    drop-shadow(0 0 18px rgba(241,140,170,.08));
  transform:none;
  animation:hattaraCottonFloat 7.2s ease-in-out infinite;
}

body.hattara-page .hattara-buy-wrap{
  position:absolute !important;
  z-index:30 !important;
  right:clamp(34px,5.1vw,88px) !important;
  top:51% !important;
  left:auto !important;
  margin:0 !important;
  transform:translateY(-50%);
}

body.hattara-page #silento-buy-now{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:clamp(168px,14vw,224px) !important;
  min-width:0 !important;
  height:58px !important;
  min-height:58px !important;
  padding:0 28px !important;
  overflow:hidden !important;
  border:1px solid rgba(237,207,136,.80) !important;
  border-radius:999px !important;
  background:
    linear-gradient(90deg,rgba(7,66,61,.88),rgba(5,30,31,.94)) !important;
  color:var(--hattara-gold-bright) !important;
  text-decoration:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,246,214,.10),
    0 12px 30px rgba(0,0,0,.26),
    0 0 16px rgba(208,166,93,.06) !important;
  animation:hattaraBuyBreath 4.8s ease-in-out infinite !important;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease !important;
}

body.hattara-page #silento-buy-now::before{
  content:"" !important;
  position:absolute !important;
  inset:5px !important;
  height:auto !important;
  left:5px !important;
  right:5px !important;
  top:5px !important;
  border:1px solid rgba(237,207,136,.08) !important;
  border-radius:999px !important;
  background:none !important;
  pointer-events:none !important;
}

body.hattara-page #silento-buy-now::after{
  content:"";
  position:absolute;
  right:15px;
  bottom:5px;
  width:42px;
  height:16px;
  opacity:.24;
  border-bottom:1px solid var(--hattara-gold-bright);
  border-radius:50%;
  transform:rotate(-8deg);
  pointer-events:none;
}

body.hattara-page #silento-buy-now:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(247,220,155,.98) !important;
  background:linear-gradient(90deg,rgba(10,80,72,.96),rgba(5,36,36,.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,246,214,.13),
    0 16px 36px rgba(0,0,0,.32),
    0 0 24px rgba(208,166,93,.11) !important;
}

body.hattara-page .silento-buy-word{
  position:relative;
  z-index:2;
  color:var(--hattara-gold-bright) !important;
  font-size:12px !important;
  font-weight:760 !important;
  line-height:1 !important;
  letter-spacing:.25em !important;
  text-indent:.25em;
  text-shadow:none !important;
}

body.hattara-page .hattara-terminal-line{
  position:absolute;
  z-index:12;
  left:50%;
  bottom:24px;
  margin:0;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 48px);
  color:#c9b992;
  font-size:.78rem;
  white-space:nowrap;
}

body.hattara-page .hattara-sketch-scene{
  position:absolute;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
}

body.hattara-page .hattara-sketch-scene .sketch-gold{
  color:var(--hattara-gold);
  stroke-width:1.35;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 1px rgba(208,166,93,.22));
  opacity:.78;
}

body.hattara-page .hattara-sketch-scene .sketch-cloud{
  color:#c49b54;
}

body.hattara-page .hattara-sketch-scene .sketch-cloud use{
  vector-effect:non-scaling-stroke;
}

body.hattara-page .hattara-water-ripples{
  color:var(--hattara-gold);
  fill:none;
  stroke:currentColor;
  stroke-width:1.35;
  opacity:.78;
  filter:drop-shadow(0 0 2px rgba(208,166,93,.12));
}

body.hattara-page .water-ring,
body.hattara-page .water-thread{
  fill:none;
  stroke:currentColor;
  vector-effect:non-scaling-stroke;
  transform-box:fill-box;
  transform-origin:center;
}

body.hattara-page .ring-a{animation:hattaraRipple 7.4s ease-in-out infinite;opacity:.40}
body.hattara-page .ring-b{animation:hattaraRipple 6.5s ease-in-out -1.3s infinite;opacity:.52}
body.hattara-page .ring-c{animation:hattaraRipple 5.8s ease-in-out -2.1s infinite;opacity:.70}
body.hattara-page .ring-d{animation:hattaraRipple 5.2s ease-in-out -2.8s infinite;opacity:.82}
body.hattara-page .ring-e{animation:hattaraRipple 4.8s ease-in-out -3.5s infinite;opacity:.66}
body.hattara-page .water-thread-a{animation:hattaraWaterThread 9s ease-in-out infinite;opacity:.34}
body.hattara-page .water-thread-b{animation:hattaraWaterThread 11s ease-in-out -3s infinite;opacity:.22}

body.hattara-page .cloud-motion,
body.hattara-page .wind-motion{
  transform-box:fill-box;
  transform-origin:center;
}
body.hattara-page .cloud-motion-a{animation:hattaraCloudA 24s ease-in-out infinite}
body.hattara-page .cloud-motion-b{animation:hattaraCloudB 29s ease-in-out infinite}
body.hattara-page .cloud-motion-c{animation:hattaraCloudC 21s ease-in-out infinite}
body.hattara-page .cloud-motion-d{animation:hattaraCloudD 18s ease-in-out infinite}
body.hattara-page .wind-motion-a{animation:hattaraWindA 18s ease-in-out infinite}
body.hattara-page .wind-motion-b{animation:hattaraWindB 22s ease-in-out -4s infinite}
body.hattara-page .wind-motion-c{animation:hattaraWindA 24s ease-in-out -6s infinite}
body.hattara-page .wind-motion-d{animation:hattaraWindB 20s ease-in-out -2s infinite}
body.hattara-page .wind-motion-e{animation:hattaraWindA 26s ease-in-out -8s infinite}

@keyframes hattaraCottonFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-.15deg)}
  50%{transform:translate3d(0,-8px,0) rotate(.25deg)}
}
@keyframes hattaraBuyBreath{
  0%,100%{filter:brightness(.98);box-shadow:inset 0 1px 0 rgba(255,246,214,.10),0 12px 30px rgba(0,0,0,.26),0 0 10px rgba(208,166,93,.03)}
  50%{filter:brightness(1.04);box-shadow:inset 0 1px 0 rgba(255,246,214,.13),0 14px 34px rgba(0,0,0,.29),0 0 20px rgba(208,166,93,.09)}
}
@keyframes hattaraRipple{
  0%,100%{transform:scale(1);opacity:.46}
  50%{transform:scale(1.045);opacity:.82}
}
@keyframes hattaraWaterThread{
  0%,100%{transform:translateX(-8px) scaleX(.98)}
  50%{transform:translateX(11px) scaleX(1.025)}
}
@keyframes hattaraCloudA{0%,100%{transform:translateX(-9px)}50%{transform:translateX(13px)}}
@keyframes hattaraCloudB{0%,100%{transform:translateX(12px)}50%{transform:translateX(-15px)}}
@keyframes hattaraCloudC{0%,100%{transform:translate(-8px,1px)}50%{transform:translate(12px,-3px)}}
@keyframes hattaraCloudD{0%,100%{transform:translateX(-7px)}50%{transform:translateX(10px)}}
@keyframes hattaraWindA{0%,100%{transform:translateX(-14px);opacity:.42}50%{transform:translateX(17px);opacity:.72}}
@keyframes hattaraWindB{0%,100%{transform:translateX(15px);opacity:.28}50%{transform:translateX(-16px);opacity:.60}}

@media (prefers-reduced-motion:reduce){
  body.hattara-page .hattara-cotton-stage img,
  body.hattara-page #silento-buy-now,
  body.hattara-page .cloud-motion,
  body.hattara-page .wind-motion,
  body.hattara-page .water-ring,
  body.hattara-page .water-thread{animation:none !important}
}

@media(max-width:1050px){
  body.hattara-page .hattara-hero-copy-block{width:min(650px,60vw)}
  body.hattara-page .hattara-cotton-stage{left:60%;width:clamp(270px,31vw,370px)}
  body.hattara-page .hattara-buy-wrap{right:28px !important;top:55% !important}
  body.hattara-page #silento-buy-now{width:170px !important}
}

@media(max-width:820px){
  body.hattara-page .hattara-hero{
    min-height:auto;
    padding-top:54px;
    padding-bottom:54px;
    overflow:hidden;
  }
  body.hattara-page .hattara-hero-copy-block{width:100%}
  body.hattara-page .hattara-hero h1{font-size:clamp(48px,12vw,70px)}
  body.hattara-page .hero-version-slot{margin-top:30px}
  body.hattara-page .hattara-cotton-stage{
    position:relative;
    left:auto;
    top:auto;
    width:min(78vw,380px);
    margin:50px auto 0;
    transform:none;
  }
  body.hattara-page .hattara-buy-wrap{
    position:relative !important;
    right:auto !important;
    top:auto !important;
    left:auto !important;
    margin:28px 0 0 !important;
    transform:none;
  }
  body.hattara-page #silento-buy-now{width:190px !important}
  body.hattara-page .hattara-terminal-line{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    margin:28px 0 0;
    width:auto;
    max-width:100%;
    white-space:normal;
    line-height:1.5;
  }
  body.hattara-page .hattara-sketch-scene{opacity:.62}
}
/* === END HATTARA JADE + GOLD HERO — APPROVED 20260909 === */

/* === HATTARA JADE SYSTEM V2 — FULL PAGE 20260909 === */
body.hattara-page{
  --hj-bg:#041013;
  --hj-bg-deep:#02090b;
  --hj-jade:#073934;
  --hj-jade-2:#0a4a42;
  --hj-jade-soft:#0b2d2d;
  --hj-gold:#c89e4d;
  --hj-gold-soft:#a77d38;
  --hj-gold-bright:#e5c474;
  --hj-cream:#f1e4bf;
  --hj-muted:#c8b78f;
  background:
    radial-gradient(circle at 58% 16%, rgba(20,71,64,.12), transparent 34%),
    linear-gradient(180deg,#030b0e 0%,#061216 48%,#030a0d 100%) !important;
  color:var(--hj-cream) !important;
}

body.hattara-page::before{
  background:
    radial-gradient(circle at 50% 0%,rgba(20,86,76,.10),transparent 42%) !important;
  opacity:1 !important;
}

body.hattara-page .silento-top{
  background:linear-gradient(180deg,rgba(3,10,12,.97),rgba(3,10,12,.83)) !important;
  border-bottom-color:rgba(222,190,112,.13) !important;
}

body.hattara-page .brand-wordmark,
body.hattara-page .house-nav > a,
body.hattara-page .nav-models > summary{
  color:#d9c18a !important;
}
body.hattara-page .house-nav > a:hover,
body.hattara-page .nav-models > summary:hover{
  color:#f2e2bb !important;
}
body.hattara-page .nav-models-panel{
  border-color:rgba(203,160,77,.28) !important;
  background:rgba(3,18,19,.98) !important;
  box-shadow:0 28px 68px rgba(0,0,0,.52) !important;
}
body.hattara-page .nav-models-panel a.is-current,
body.hattara-page .nav-models-panel a:hover{
  background:rgba(8,69,61,.32) !important;
}
body.hattara-page .nav-models-panel small{
  color:#b7904c !important;
}

/* hero canvas */
body.hattara-page .hattara-hero{
  position:relative !important;
  min-height:calc(100vh - 80px) !important;
  padding:58px 24px 74px !important;
  overflow:hidden !important;
  border-bottom:1px solid rgba(207,166,83,.15) !important;
  background:
    radial-gradient(circle at 58% 55%,rgba(11,64,57,.10),transparent 31%),
    linear-gradient(180deg,rgba(2,9,11,.08),rgba(2,9,11,.24)) !important;
}
body.hattara-page .hattara-hero::before,
body.hattara-page .hattara-hero::after{
  content:none !important;
}
body.hattara-page .hattara-hero-copy-block{
  position:relative !important;
  z-index:20 !important;
  width:min(650px,49vw) !important;
}
body.hattara-page .hattara-hero .over{
  color:#bba16c !important;
}
body.hattara-page .hattara-hero h1{
  color:#f0e2bd !important;
  text-shadow:0 2px 0 rgba(0,0,0,.12) !important;
}
body.hattara-page .hattara-hero .hero-copy{
  color:#d7c8a5 !important;
}

/* artwork extracted from the approved jade/gold concept */
body.hattara-page .hattara-reference-decor{
  position:absolute;
  z-index:3;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
body.hattara-page .hattara-reference-decor img{
  position:absolute;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 0 3px rgba(205,158,73,.10));
}
body.hattara-page .decor-cloud-left{
  width:clamp(190px,18vw,300px);
  left:-46px;
  top:6%;
  opacity:.82;
  animation:hjCloudLeft 24s ease-in-out infinite;
}
body.hattara-page .decor-cloud-right{
  width:clamp(300px,25vw,430px);
  right:-74px;
  top:16%;
  opacity:.88;
  animation:hjCloudRight 28s ease-in-out infinite;
}
body.hattara-page .decor-cloud-mid{
  width:clamp(220px,20vw,340px);
  right:17%;
  top:43%;
  opacity:.72;
  animation:hjCloudMid 21s ease-in-out infinite;
}
body.hattara-page .decor-wind-left{
  width:clamp(520px,55vw,800px);
  left:-12%;
  top:33%;
  opacity:.58;
  animation:hjWindLeft 24s ease-in-out infinite;
}
body.hattara-page .decor-wind-lower-left{
  width:clamp(280px,30vw,430px);
  left:22%;
  top:64%;
  opacity:.56;
  animation:hjWindLowerLeft 19s ease-in-out infinite;
}
body.hattara-page .decor-wind-lower-right{
  width:clamp(340px,35vw,520px);
  right:3%;
  top:67%;
  opacity:.55;
  animation:hjWindLowerRight 23s ease-in-out infinite;
}
body.hattara-page .decor-water{
  z-index:4;
  width:clamp(620px,64vw,930px);
  left:57.5%;
  bottom:2.2%;
  transform:translateX(-50%);
  opacity:.86;
  animation:hjWaterBreath 8s ease-in-out infinite;
}

body.hattara-page .hattara-cotton-stage{
  z-index:10 !important;
  left:57.6% !important;
  top:59% !important;
  width:clamp(280px,29vw,390px) !important;
}
body.hattara-page .hattara-cotton-stage img{
  filter:
    saturate(1.04)
    drop-shadow(0 32px 48px rgba(0,0,0,.40))
    drop-shadow(0 7px 18px rgba(233,169,183,.08)) !important;
}

/* VERSION: eliminate old blue/cyber treatment completely */
body.hattara-page .hero-version-slot{
  margin-top:34px !important;
  max-width:520px !important;
}
body.hattara-page .version-menu{
  width:min(500px,100%) !important;
  overflow:visible !important;
  border:1px solid rgba(229,196,116,.70) !important;
  border-radius:18px !important;
  background:
    linear-gradient(90deg,rgba(5,57,52,.92),rgba(3,31,32,.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,240,190,.07),
    0 14px 36px rgba(0,0,0,.28),
    0 0 0 1px rgba(33,104,91,.08) !important;
  backdrop-filter:blur(10px) !important;
}
body.hattara-page .version-menu::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  background:
    url("assets/decor/cloud-mid.png") right -36px bottom -34px/180px auto no-repeat !important;
  opacity:.22 !important;
  mix-blend-mode:normal !important;
  pointer-events:none !important;
}
body.hattara-page .version-menu summary{
  position:relative !important;
  z-index:3 !important;
  min-height:60px !important;
  padding:0 18px !important;
  border-radius:17px !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--hj-cream) !important;
}
body.hattara-page .version-menu summary:hover{
  background:rgba(18,86,75,.17) !important;
  box-shadow:none !important;
  transform:none !important;
}
body.hattara-page .version-menu summary span{
  color:#9fd0bf !important;
  text-shadow:none !important;
}
body.hattara-page .version-menu summary strong{
  color:#f4e7c4 !important;
  text-shadow:none !important;
}
body.hattara-page .version-menu summary::after{
  color:#e6c574 !important;
  text-shadow:none !important;
}
body.hattara-page .version-panel{
  border:1px solid rgba(221,181,93,.40) !important;
  background:rgba(3,22,22,.985) !important;
  box-shadow:0 24px 56px rgba(0,0,0,.54) !important;
}
body.hattara-page .version-kicker,
body.hattara-page .version-panel small,
body.hattara-page .installer-preview span{
  color:#bca369 !important;
  text-shadow:none !important;
}
body.hattara-page .version-panel > a{
  border-color:transparent !important;
  color:#efe1bd !important;
}
body.hattara-page .version-panel > a:hover{
  background:rgba(11,73,64,.38) !important;
  border-color:rgba(218,177,88,.28) !important;
}
body.hattara-page .installer-preview{
  border-top-color:rgba(218,177,88,.20) !important;
}

/* BUY: quiet jade lacquer button at far right */
body.hattara-page .hattara-buy-wrap{
  right:clamp(28px,4.5vw,78px) !important;
  top:51.5% !important;
}
body.hattara-page #silento-buy-now{
  width:clamp(168px,14vw,220px) !important;
  height:56px !important;
  min-height:56px !important;
  border:1px solid rgba(229,196,116,.77) !important;
  background:
    linear-gradient(90deg,rgba(5,58,53,.92),rgba(4,34,34,.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,239,187,.07),
    0 12px 30px rgba(0,0,0,.28) !important;
  animation:hjBuyBreath 5.5s ease-in-out infinite !important;
}
body.hattara-page #silento-buy-now::before{
  inset:5px !important;
  border-color:rgba(232,201,128,.055) !important;
}
body.hattara-page #silento-buy-now::after{
  content:"" !important;
  right:-5px !important;
  bottom:-18px !important;
  width:92px !important;
  height:64px !important;
  border:0 !important;
  border-radius:0 !important;
  background:url("assets/decor/cloud-mid.png") center/contain no-repeat !important;
  opacity:.15 !important;
  transform:none !important;
}
body.hattara-page #silento-buy-now:hover{
  background:linear-gradient(90deg,rgba(8,76,67,.97),rgba(4,39,38,.99)) !important;
  border-color:rgba(240,210,137,.96) !important;
}
body.hattara-page .silento-buy-word{
  color:#eccd82 !important;
}

body.hattara-page .hattara-terminal-line{
  color:#ccb985 !important;
  bottom:18px !important;
}
body.hattara-page .terminal-accent{
  color:#e4c778 !important;
}

/* FULL HATTARA PAGE: carry the jade/gold language below the hero */
body.hattara-page .story-section{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  margin:30px auto !important;
  padding:clamp(34px,4vw,54px) !important;
  border:1px solid rgba(203,160,77,.24) !important;
  border-radius:14px !important;
  background:
    radial-gradient(circle at 86% 16%,rgba(14,74,66,.15),transparent 26%),
    linear-gradient(145deg,rgba(6,31,32,.88),rgba(3,14,18,.95)) !important;
  box-shadow:
    0 22px 64px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(232,203,132,.025) !important;
}
body.hattara-page .story-section::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  top:-34px !important;
  right:-36px !important;
  width:320px !important;
  height:180px !important;
  background:url("assets/decor/cloud-right.png") right top/contain no-repeat !important;
  opacity:.12 !important;
  transform:none !important;
  filter:none !important;
  pointer-events:none !important;
}
body.hattara-page .story-section:nth-of-type(even)::before{
  right:auto !important;
  left:-48px !important;
  background-image:url("assets/decor/cloud-left.png") !important;
  background-position:left top !important;
}
body.hattara-page .story-section::after{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  left:34px !important;
  right:34px !important;
  bottom:20px !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(203,160,77,.24),transparent) !important;
  opacity:.65 !important;
  transform:none !important;
  filter:none !important;
  pointer-events:none !important;
}
body.hattara-page .story-copy{
  gap:16px !important;
}
body.hattara-page .story-copy h2{
  color:#f0e2bd !important;
  font-weight:570 !important;
  letter-spacing:-.02em !important;
}
body.hattara-page .story-copy p{
  color:#cfc3a6 !important;
}
body.hattara-page .panel-over,
body.hattara-page .feature-kicker{
  color:#c29c55 !important;
}

body.hattara-page .story-shot{
  position:relative !important;
  border:1px solid rgba(220,180,91,.34) !important;
  border-radius:12px !important;
  background:#071415 !important;
  box-shadow:
    0 20px 54px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(11,68,60,.16) !important;
}
body.hattara-page .story-shot::before{
  content:"" !important;
  position:absolute !important;
  z-index:3 !important;
  inset:0 !important;
  border:1px solid rgba(235,201,119,.06) !important;
  background:
    linear-gradient(90deg,rgba(6,67,60,.06),transparent 22%,transparent 78%,rgba(6,67,60,.05)) !important;
  pointer-events:none !important;
}
body.hattara-page .story-shot img{
  background:#071011 !important;
  filter:saturate(.92) contrast(1.035) brightness(.98) !important;
}

body.hattara-page .feature-grid{
  gap:16px !important;
}
body.hattara-page .feature-card{
  position:relative !important;
  overflow:hidden !important;
  border:1px solid rgba(202,159,75,.24) !important;
  border-radius:12px !important;
  background:
    linear-gradient(145deg,rgba(7,55,49,.42),rgba(3,19,21,.90)) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.22) !important;
}
body.hattara-page .feature-card::after{
  content:"";
  position:absolute;
  right:-24px;
  bottom:-28px;
  width:128px;
  height:82px;
  background:url("assets/decor/cloud-mid.png") center/contain no-repeat;
  opacity:.10;
  pointer-events:none;
}
body.hattara-page .feature-card h3{
  color:#eadbb5 !important;
}
body.hattara-page .feature-card p{
  color:#c8bda1 !important;
}
body.hattara-page .feature-card:hover{
  border-color:rgba(221,183,98,.38) !important;
  background:linear-gradient(145deg,rgba(9,67,58,.49),rgba(3,21,22,.94)) !important;
  box-shadow:0 20px 46px rgba(0,0,0,.28) !important;
}

body.hattara-page .service-link{
  border-color:rgba(208,166,83,.28) !important;
  background:rgba(6,53,48,.34) !important;
  box-shadow:none !important;
}
body.hattara-page .service-link:hover{
  border-color:rgba(229,196,116,.55) !important;
  background:rgba(9,71,62,.48) !important;
}
body.hattara-page .service-link img{
  filter:sepia(1) saturate(.65) hue-rotate(350deg) brightness(1.25) !important;
}

body.hattara-page .site-footer{
  border-top:1px solid rgba(205,161,78,.17) !important;
}
body.hattara-page .official-mark{
  opacity:.76 !important;
  filter:sepia(.5) saturate(.7) brightness(1.08) !important;
}

@keyframes hjCloudLeft{0%,100%{transform:translate3d(-7px,0,0)}50%{transform:translate3d(16px,2px,0)}}
@keyframes hjCloudRight{0%,100%{transform:translate3d(11px,0,0)}50%{transform:translate3d(-17px,-3px,0)}}
@keyframes hjCloudMid{0%,100%{transform:translate3d(-5px,1px,0)}50%{transform:translate3d(14px,-4px,0)}}
@keyframes hjWindLeft{0%,100%{transform:translate3d(-14px,0,0);opacity:.48}50%{transform:translate3d(18px,0,0);opacity:.65}}
@keyframes hjWindLowerLeft{0%,100%{transform:translate3d(-9px,0,0)}50%{transform:translate3d(12px,0,0)}}
@keyframes hjWindLowerRight{0%,100%{transform:translate3d(10px,0,0)}50%{transform:translate3d(-13px,0,0)}}
@keyframes hjWaterBreath{0%,100%{transform:translateX(-50%) scaleX(.985);opacity:.73}50%{transform:translateX(-50%) scaleX(1.025);opacity:.90}}
@keyframes hjBuyBreath{0%,100%{filter:brightness(.98)}50%{filter:brightness(1.055)}}

@media(max-width:1050px){
  body.hattara-page .hattara-cotton-stage{left:59% !important;width:clamp(260px,31vw,360px) !important}
  body.hattara-page .decor-cloud-mid{right:14%}
  body.hattara-page .hattara-buy-wrap{right:24px !important}
}

@media(max-width:820px){
  body.hattara-page .hattara-hero{padding-top:48px !important}
  body.hattara-page .hattara-hero-copy-block{width:100% !important}
  body.hattara-page .hattara-cotton-stage{left:auto !important;top:auto !important;width:min(76vw,360px) !important}
  body.hattara-page .hattara-buy-wrap{right:auto !important;top:auto !important}
  body.hattara-page .decor-water{width:760px;left:56%;bottom:12%}
  body.hattara-page .decor-cloud-right{right:-160px;top:28%}
  body.hattara-page .decor-cloud-mid{right:-80px;top:52%}
  body.hattara-page .decor-wind-left{left:-300px;top:37%}
  body.hattara-page .story-section{padding:28px 22px !important;border-radius:12px !important}
}

@media(prefers-reduced-motion:reduce){
  body.hattara-page .hattara-reference-decor img,
  body.hattara-page #silento-buy-now{animation:none !important}
}
/* === END HATTARA JADE SYSTEM V2 — FULL PAGE 20260909 === */

/* ========================================================================== 
   HATTARA — APPROVED ENGRAVED JADE / GOLD SYSTEM — FINAL AUTHORITY 2026-09-09
   Visual authority: approved Mechanical soul / Digital precision reference.
   This block intentionally overrides all earlier Hattara experiments.
   ========================================================================== */

body.hattara-page{
  --hj-bg:#061718;
  --hj-bg-deep:#031011;
  --hj-jade:#0b5e54;
  --hj-jade-bright:#177968;
  --hj-gold:#d4a84a;
  --hj-gold-soft:#b9924a;
  --hj-cream:#f1e7cb;
  --hj-copy:#cfc3a5;
  --hj-line:rgba(212,168,74,.36);
  margin:0 !important;
  overflow-x:hidden !important;
  background:
    radial-gradient(circle at 73% 12%,rgba(13,91,79,.16),transparent 27%),
    radial-gradient(circle at 8% 43%,rgba(10,75,65,.09),transparent 24%),
    linear-gradient(180deg,#071b1c 0%,#051516 48%,#030f10 100%) !important;
  color:var(--hj-cream) !important;
}
body.hattara-page::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-2 !important;
  pointer-events:none !important;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.008) 0 1px,transparent 1px 4px),
    radial-gradient(circle at 50% -20%,rgba(221,182,91,.035),transparent 40%) !important;
  opacity:.78 !important;
}
body.hattara-page::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 18%,transparent 82%,rgba(0,0,0,.12));
}

/* Header: quiet, sticky, and part of the engraved field. */
body.hattara-page .silento-top{
  position:sticky !important;
  top:0 !important;
  z-index:80 !important;
  height:78px !important;
  max-width:100% !important;
  padding-left:clamp(28px,4vw,76px) !important;
  padding-right:clamp(28px,4vw,76px) !important;
  border-bottom:1px solid rgba(212,168,74,.18) !important;
  background:rgba(4,18,19,.88) !important;
  backdrop-filter:blur(14px) saturate(110%) !important;
}
body.hattara-page .brand-wordmark{
  color:var(--hj-cream) !important;
  letter-spacing:.18em !important;
}
body.hattara-page .house-nav > a,
body.hattara-page .nav-models > summary{
  color:#bcb294 !important;
  letter-spacing:.12em !important;
}
body.hattara-page .house-nav > a:hover,
body.hattara-page .nav-models > summary:hover{
  color:var(--hj-gold) !important;
}
body.hattara-page .nav-models-panel{
  border:1px solid rgba(212,168,74,.34) !important;
  border-radius:4px !important;
  background:rgba(3,19,19,.985) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.48) !important;
}
body.hattara-page .nav-models-panel a{
  color:var(--hj-cream) !important;
  border-radius:2px !important;
}
body.hattara-page .nav-models-panel a.is-current,
body.hattara-page .nav-models-panel a:hover{
  background:rgba(11,94,84,.27) !important;
  color:var(--hj-cream) !important;
}
body.hattara-page .nav-models-panel small{color:#b4985e !important}

/* HERO — composition follows the approved reference, not the V2 crop collage. */
body.hattara-page .hattara-hero{
  position:relative !important;
  isolation:isolate !important;
  max-width:none !important;
  width:100% !important;
  min-height:calc(100svh - 78px) !important;
  padding:clamp(72px,8vh,112px) clamp(28px,4vw,76px) 88px !important;
  display:block !important;
  overflow:hidden !important;
  border:0 !important;
  border-bottom:1px solid rgba(212,168,74,.24) !important;
  background:
    radial-gradient(circle at 67% 48%,rgba(14,99,84,.10),transparent 26%),
    linear-gradient(90deg,rgba(2,13,14,.08),transparent 36%,rgba(5,36,34,.08)) !important;
  opacity:1 !important;
  transform:none !important;
}
body.hattara-page .hattara-hero::before{
  content:"" !important;
  position:absolute !important;
  z-index:-2 !important;
  inset:0 !important;
  background:
    linear-gradient(90deg,rgba(2,10,11,.18),transparent 42%),
    radial-gradient(ellipse at 72% 82%,rgba(12,89,77,.10),transparent 31%) !important;
  pointer-events:none !important;
}
body.hattara-page .hattara-hero::after{
  content:"" !important;
  position:absolute !important;
  z-index:8 !important;
  left:clamp(28px,4vw,76px) !important;
  right:clamp(28px,4vw,76px) !important;
  bottom:54px !important;
  height:1px !important;
  background:linear-gradient(90deg,rgba(212,168,74,.55),rgba(212,168,74,.12) 44%,transparent 77%) !important;
  pointer-events:none !important;
}

body.hattara-page .hattara-hero-copy-block{
  position:relative !important;
  z-index:10 !important;
  width:min(47vw,760px) !important;
  max-width:760px !important;
  margin:0 !important;
}
body.hattara-page .hattara-hero .over{
  margin:0 0 16px !important;
  color:#bea268 !important;
  font-size:.72rem !important;
  letter-spacing:.28em !important;
}
body.hattara-page .hattara-hero h1{
  max-width:800px !important;
  margin:0 0 24px !important;
  color:#f2ead7 !important;
  font-size:clamp(58px,7.25vw,118px) !important;
  line-height:.92 !important;
  font-weight:560 !important;
  letter-spacing:-.052em !important;
  text-shadow:0 1px 0 rgba(255,255,255,.03),0 24px 60px rgba(0,0,0,.17) !important;
}
body.hattara-page .hattara-hero .hero-copy{
  max-width:575px !important;
  margin:0 !important;
  color:#c9bea2 !important;
  font-size:clamp(.96rem,1.15vw,1.08rem) !important;
  line-height:1.62 !important;
}

/* Purpose-built transparent engraved decoration. */
body.hattara-page .hattara-reference-decor{
  position:absolute !important;
  z-index:1 !important;
  inset:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}
body.hattara-page .hattara-reference-decor img{
  position:absolute !important;
  display:block !important;
  max-width:none !important;
  user-select:none !important;
  pointer-events:none !important;
}
body.hattara-page .engraved-cloud{
  opacity:.87 !important;
  filter:drop-shadow(0 7px 14px rgba(0,0,0,.16)) !important;
}
body.hattara-page .engraved-cloud-left{
  width:clamp(650px,58vw,1100px) !important;
  left:clamp(-430px,-21vw,-210px) !important;
  top:clamp(-88px,-4vw,-28px) !important;
  transform:scaleX(-1) rotate(-2deg) !important;
  transform-origin:center !important;
  animation:hjFinalCloudLeft 34s ease-in-out infinite !important;
}
body.hattara-page .engraved-cloud-right{
  width:clamp(560px,46vw,900px) !important;
  right:clamp(-300px,-13vw,-120px) !important;
  top:clamp(-28px,1vw,28px) !important;
  opacity:.75 !important;
  animation:hjFinalCloudRight 39s ease-in-out infinite !important;
}
body.hattara-page .engraved-cloud-mid{
  width:clamp(420px,34vw,680px) !important;
  right:clamp(20px,5vw,110px) !important;
  top:27% !important;
  opacity:.38 !important;
  transform:scale(.86) !important;
  animation:hjFinalCloudMid 31s ease-in-out infinite !important;
}
body.hattara-page .engraved-wind{
  width:clamp(520px,42vw,820px) !important;
  opacity:.56 !important;
}
body.hattara-page .engraved-wind-upper{
  left:45% !important;
  top:13% !important;
  transform:rotate(-2deg) !important;
  animation:hjFinalWindA 38s ease-in-out infinite !important;
}
body.hattara-page .engraved-wind-lower{
  left:-7% !important;
  bottom:7% !important;
  width:clamp(600px,54vw,980px) !important;
  opacity:.43 !important;
  transform:scaleX(-1) rotate(1deg) !important;
  animation:hjFinalWindB 44s ease-in-out infinite !important;
}
body.hattara-page .engraved-water{
  left:65% !important;
  bottom:1.5% !important;
  width:clamp(950px,87vw,1580px) !important;
  opacity:.84 !important;
  transform:translateX(-50%) scaleX(1.03) !important;
  animation:hjFinalWater 9.5s ease-in-out infinite !important;
}

/* Cotton candy stays the real Hattara asset and is the sole vivid object. */
body.hattara-page .hattara-cotton-stage{
  position:absolute !important;
  z-index:7 !important;
  left:64.5% !important;
  top:52.5% !important;
  width:clamp(335px,31vw,525px) !important;
  margin:0 !important;
  transform:translate(-50%,-48%) !important;
  pointer-events:none !important;
}
body.hattara-page .hattara-cotton-stage .hero-sticker{max-width:none !important;width:100% !important}
body.hattara-page .hattara-cotton-stage img{
  width:100% !important;
  height:auto !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
  filter:drop-shadow(0 30px 36px rgba(0,0,0,.27)) !important;
  transform:none !important;
}

/* Version selector — dark jade lacquer, thin warm-gold rule, absolutely no cyan. */
body.hattara-page .hero-version-slot{
  position:relative !important;
  z-index:20 !important;
  width:min(430px,37vw) !important;
  margin-top:36px !important;
}
body.hattara-page .version-menu{
  position:relative !important;
  width:100% !important;
  border:1px solid rgba(218,178,86,.72) !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,rgba(7,75,66,.92),rgba(4,35,34,.97)) !important;
  box-shadow:inset 0 1px 0 rgba(255,244,203,.05),0 18px 42px rgba(0,0,0,.24) !important;
  overflow:visible !important;
}
body.hattara-page .version-menu::before{display:none !important}
body.hattara-page .version-menu summary{
  min-height:58px !important;
  padding:0 19px 0 22px !important;
  display:grid !important;
  grid-template-columns:1fr auto 28px !important;
  align-items:center !important;
  gap:17px !important;
  border-radius:999px !important;
  background:transparent !important;
  color:var(--hj-cream) !important;
  box-shadow:none !important;
}
body.hattara-page .version-menu summary span{
  color:#c8b889 !important;
  font-size:.67rem !important;
  letter-spacing:.22em !important;
}
body.hattara-page .version-menu summary strong{
  color:#f0dfb5 !important;
  font-size:.8rem !important;
  letter-spacing:.13em !important;
  font-weight:560 !important;
}
body.hattara-page .version-menu summary::after{
  content:"⌄" !important;
  width:28px !important;
  height:28px !important;
  display:grid !important;
  place-items:center !important;
  color:var(--hj-gold) !important;
  font-size:1rem !important;
  transform:translateY(-2px) !important;
  transition:transform .2s ease !important;
}
body.hattara-page .version-menu[open] summary::after{transform:rotate(180deg) translateY(1px) !important}
body.hattara-page .version-menu summary:hover{background:rgba(14,104,90,.12) !important;transform:none !important}
body.hattara-page .version-panel{
  top:calc(100% + 12px) !important;
  left:0 !important;
  right:0 !important;
  border:1px solid rgba(212,168,74,.46) !important;
  border-radius:5px !important;
  background:rgba(3,20,20,.99) !important;
  box-shadow:0 28px 70px rgba(0,0,0,.55) !important;
}
body.hattara-page .version-kicker,
body.hattara-page .version-panel small,
body.hattara-page .installer-preview span{color:#b7995e !important}
body.hattara-page .version-panel > a{
  color:var(--hj-cream) !important;
  border:1px solid transparent !important;
  border-radius:2px !important;
}
body.hattara-page .version-panel > a:hover{
  background:rgba(10,86,75,.33) !important;
  border-color:rgba(212,168,74,.22) !important;
}
body.hattara-page .installer-preview{border-top-color:rgba(212,168,74,.18) !important}

/* BUY — far right, simple, breathing only through light. */
body.hattara-page .hattara-buy-wrap{
  position:absolute !important;
  z-index:22 !important;
  right:clamp(32px,4.2vw,82px) !important;
  top:54% !important;
  margin:0 !important;
  transform:translateY(-50%) !important;
}
body.hattara-page #silento-buy-now{
  width:clamp(150px,12vw,188px) !important;
  height:58px !important;
  min-height:58px !important;
  padding:0 26px !important;
  border:1px solid rgba(221,184,96,.86) !important;
  border-radius:10px !important;
  background:linear-gradient(90deg,rgba(7,77,67,.96),rgba(4,41,39,.985)) !important;
  box-shadow:inset 0 1px 0 rgba(255,239,190,.06),0 16px 34px rgba(0,0,0,.26) !important;
  animation:hjFinalBuy 6.2s ease-in-out infinite !important;
}
body.hattara-page #silento-buy-now::before,
body.hattara-page #silento-buy-now::after{display:none !important}
body.hattara-page #silento-buy-now:hover{
  border-color:#e0bc6d !important;
  background:linear-gradient(90deg,rgba(9,92,79,.98),rgba(5,49,45,.995)) !important;
  transform:translateY(-1px) !important;
}
body.hattara-page .silento-buy-word{
  color:#ecd083 !important;
  font-size:.78rem !important;
  letter-spacing:.28em !important;
  text-indent:.28em !important;
}
body.hattara-page .hattara-terminal-line{
  position:absolute !important;
  z-index:10 !important;
  left:clamp(28px,4vw,76px) !important;
  bottom:24px !important;
  margin:0 !important;
  color:#b9a879 !important;
  font-size:.78rem !important;
  letter-spacing:.045em !important;
}
body.hattara-page .terminal-accent{color:#ddbd68 !important}

/* LOWER PAGE — same language, but quieter than the hero. No blue SaaS cards. */
body.hattara-page .story-section{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  max-width:1480px !important;
  min-height:72vh !important;
  margin:0 auto !important;
  padding:clamp(84px,8vw,132px) clamp(28px,4vw,76px) !important;
  gap:clamp(44px,6vw,96px) !important;
  border:0 !important;
  border-bottom:1px solid rgba(212,168,74,.19) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}
body.hattara-page .story-section:nth-of-type(even){
  background:linear-gradient(90deg,rgba(11,73,64,.055),transparent 38%,rgba(8,55,50,.035)) !important;
}
body.hattara-page .story-section::after{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  left:clamp(28px,4vw,76px) !important;
  top:56px !important;
  width:88px !important;
  height:1px !important;
  background:var(--hj-gold) !important;
  opacity:.62 !important;
  transform:none !important;
  filter:none !important;
}
body.hattara-page .story-section::before{
  content:"" !important;
  position:absolute !important;
  z-index:-2 !important;
  width:520px !important;
  height:160px !important;
  right:-215px !important;
  top:20px !important;
  background:url("assets/decor/hattara-cloud.svg") center/contain no-repeat !important;
  opacity:.055 !important;
  transform:none !important;
  filter:none !important;
  pointer-events:none !important;
}
body.hattara-page .story-section:nth-of-type(odd)::before{
  right:auto !important;
  left:-250px !important;
  transform:scaleX(-1) !important;
}
body.hattara-page .story-copy{
  gap:18px !important;
  transform:none !important;
}
body.hattara-page .panel-over,
body.hattara-page .feature-kicker{
  color:#b99658 !important;
  font-size:.69rem !important;
  letter-spacing:.27em !important;
}
body.hattara-page .story-copy h2{
  color:#efe5ca !important;
  font-size:clamp(34px,4.4vw,64px) !important;
  line-height:1 !important;
  font-weight:540 !important;
  letter-spacing:-.032em !important;
}
body.hattara-page .story-copy p{
  max-width:690px !important;
  color:#c8bda2 !important;
  font-size:1rem !important;
  line-height:1.72 !important;
}

/* Screenshots remain genuine: only a restrained engraved frame is added. */
body.hattara-page .story-shot{
  position:relative !important;
  margin:0 !important;
  overflow:hidden !important;
  border:1px solid rgba(212,168,74,.42) !important;
  border-radius:2px !important;
  background:#041011 !important;
  box-shadow:0 30px 70px rgba(0,0,0,.30),0 0 0 1px rgba(10,89,76,.12) inset !important;
  transform:none !important;
  transition:border-color .35s ease,box-shadow .35s ease !important;
}
body.hattara-page .story-shot::before{
  content:"" !important;
  position:absolute !important;
  z-index:3 !important;
  inset:8px !important;
  border:1px solid rgba(230,193,107,.075) !important;
  background:none !important;
  pointer-events:none !important;
}
body.hattara-page .story-shot::after{
  content:"";
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--hj-jade-bright),var(--hj-gold),transparent);
  opacity:.62;
  pointer-events:none;
}
body.hattara-page .story-shot img{
  display:block !important;
  width:100% !important;
  background:#071011 !important;
  filter:none !important;
  transform:none !important;
}
body.hattara-page .story-shot-large img{height:clamp(390px,38vw,550px) !important;object-position:top center !important}
body.hattara-page .story-shot-medium img{height:clamp(290px,29vw,410px) !important;object-position:top center !important}
body.hattara-page .story-section:hover .story-shot img{transform:none !important;filter:none !important}
body.hattara-page .story-shot:hover{border-color:rgba(221,184,94,.58) !important;box-shadow:0 34px 78px rgba(0,0,0,.34),0 0 0 1px rgba(10,89,76,.16) inset !important}

/* Feature bundle: editorial plates rather than rounded software cards. */
body.hattara-page .feature-grid-section{grid-template-columns:minmax(0,1fr) !important}
body.hattara-page .feature-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:0 !important;
  border-top:1px solid rgba(212,168,74,.24) !important;
  border-left:1px solid rgba(212,168,74,.16) !important;
}
body.hattara-page .feature-card{
  position:relative !important;
  min-height:190px !important;
  padding:27px 30px 30px !important;
  border:0 !important;
  border-right:1px solid rgba(212,168,74,.16) !important;
  border-bottom:1px solid rgba(212,168,74,.20) !important;
  border-radius:0 !important;
  background:linear-gradient(145deg,rgba(11,86,74,.095),rgba(2,18,19,.22)) !important;
  box-shadow:none !important;
  transform:none !important;
}
body.hattara-page .feature-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:34px;
  height:1px;
  background:var(--hj-gold);
  opacity:.68;
}
body.hattara-page .feature-card::after{display:none !important}
body.hattara-page .feature-card h3{
  margin:0 0 11px !important;
  color:#e9ddb9 !important;
  font-size:1.2rem !important;
  font-weight:540 !important;
}
body.hattara-page .feature-card p{color:#c2b79d !important;line-height:1.62 !important}
body.hattara-page .feature-card:hover{
  background:linear-gradient(145deg,rgba(12,96,82,.15),rgba(3,24,24,.28)) !important;
  border-color:rgba(212,168,74,.20) !important;
  box-shadow:none !important;
  transform:none !important;
}

/* Messenger/service buttons continue the same restrained material language. */
body.hattara-page .service-links{gap:12px !important;margin-top:10px !important}
body.hattara-page .service-link{
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  min-height:52px !important;
  border:1px solid rgba(212,168,74,.31) !important;
  border-radius:5px !important;
  background:rgba(8,68,59,.18) !important;
  box-shadow:none !important;
}
body.hattara-page .service-link:hover{
  border-color:rgba(224,188,104,.60) !important;
  background:rgba(11,88,75,.27) !important;
}
body.hattara-page .service-link img{
  width:34px !important;
  height:34px !important;
  filter:sepia(1) saturate(.62) hue-rotate(350deg) brightness(1.25) !important;
}

/* Footer becomes the last quiet engraved rule. */
body.hattara-page .site-footer{
  min-height:240px !important;
  max-width:1480px !important;
  margin:0 auto !important;
  padding:64px clamp(28px,4vw,76px) 74px !important;
  border-top:0 !important;
  background:linear-gradient(180deg,transparent,rgba(2,16,17,.34)) !important;
  opacity:1 !important;
  transform:none !important;
}
body.hattara-page .official-marks{padding-top:28px !important;border-top:1px solid rgba(212,168,74,.16) !important;width:100% !important}
body.hattara-page .official-mark{opacity:.78 !important;filter:sepia(.38) saturate(.72) brightness(1.08) !important}

/* Prevent old cyber/scroll transforms from making this page fight the final layout. */
body.hattara-page .story-section,
body.hattara-page .story-copy,
body.hattara-page .story-shot,
body.hattara-page .feature-card{transform:none !important}

@keyframes hjFinalCloudLeft{
  0%,100%{translate:0 0}
  50%{translate:28px 3px}
}
@keyframes hjFinalCloudRight{
  0%,100%{translate:0 0}
  50%{translate:-24px -2px}
}
@keyframes hjFinalCloudMid{
  0%,100%{translate:0 0}
  50%{translate:18px -5px}
}
@keyframes hjFinalWindA{
  0%,100%{translate:-12px 0}
  50%{translate:22px 0}
}
@keyframes hjFinalWindB{
  0%,100%{translate:13px 0}
  50%{translate:-18px 0}
}
@keyframes hjFinalWater{
  0%,100%{scale:1 .99;opacity:.77}
  50%{scale:1.018 1.02;opacity:.89}
}
@keyframes hjFinalBuy{
  0%,100%{filter:brightness(.98);box-shadow:inset 0 1px 0 rgba(255,239,190,.06),0 16px 34px rgba(0,0,0,.26)}
  50%{filter:brightness(1.055);box-shadow:inset 0 1px 0 rgba(255,239,190,.09),0 18px 38px rgba(0,0,0,.29),0 0 20px rgba(202,159,71,.055)}
}

@media(max-width:1100px){
  body.hattara-page .hattara-hero-copy-block{width:min(52vw,690px) !important}
  body.hattara-page .hattara-cotton-stage{left:67% !important;width:clamp(300px,32vw,450px) !important}
  body.hattara-page .hattara-buy-wrap{right:28px !important}
  body.hattara-page #silento-buy-now{width:146px !important}
  body.hattara-page .engraved-cloud-mid{right:-70px !important}
}

@media(max-width:860px){
  body.hattara-page .silento-top{height:72px !important;padding-left:22px !important;padding-right:22px !important}
  body.hattara-page .hattara-hero{
    min-height:auto !important;
    padding:58px 22px 100px !important;
    display:flex !important;
    flex-direction:column !important;
  }
  body.hattara-page .hattara-hero-copy-block{width:100% !important;max-width:none !important}
  body.hattara-page .hattara-hero h1{font-size:clamp(50px,13vw,82px) !important;max-width:720px !important}
  body.hattara-page .hattara-hero .hero-copy{max-width:620px !important}
  body.hattara-page .hero-version-slot{width:min(430px,100%) !important}
  body.hattara-page .hattara-cotton-stage{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    align-self:center !important;
    width:min(72vw,410px) !important;
    margin:52px 0 8px !important;
    transform:none !important;
  }
  body.hattara-page .hattara-buy-wrap{
    position:relative !important;
    right:auto !important;
    top:auto !important;
    align-self:flex-end !important;
    margin:-82px 0 52px !important;
    transform:none !important;
  }
  body.hattara-page #silento-buy-now{width:164px !important}
  body.hattara-page .engraved-water{left:56% !important;bottom:2% !important;width:1100px !important}
  body.hattara-page .engraved-cloud-left{left:-390px !important;top:-38px !important}
  body.hattara-page .engraved-cloud-right{right:-370px !important;top:21% !important}
  body.hattara-page .engraved-cloud-mid{display:none !important}
  body.hattara-page .engraved-wind-upper{left:25% !important;top:38% !important}
  body.hattara-page .hattara-terminal-line{left:22px !important;right:22px !important;bottom:20px !important}
  body.hattara-page .hattara-hero::after{left:22px !important;right:22px !important;bottom:48px !important}

  body.hattara-page .story-section,
  body.hattara-page .story-right{
    min-height:auto !important;
    grid-template-columns:1fr !important;
    gap:36px !important;
    padding:74px 22px !important;
  }
  body.hattara-page .story-right .story-shot{order:2 !important}
  body.hattara-page .story-right .story-copy{order:1 !important}
  body.hattara-page .feature-grid{grid-template-columns:1fr !important}
  body.hattara-page .story-shot-large img,
  body.hattara-page .story-shot-medium img{height:auto !important;max-height:none !important}
  body.hattara-page .site-footer{padding-left:22px !important;padding-right:22px !important}
}

@media(max-width:560px){
  body.hattara-page .house-nav{gap:10px !important}
  body.hattara-page .brand-wordmark{font-size:.8rem !important}
  body.hattara-page .house-nav > a,
  body.hattara-page .nav-models > summary{font-size:.68rem !important;letter-spacing:.08em !important}
  body.hattara-page .hattara-hero h1{font-size:clamp(46px,15.3vw,68px) !important}
  body.hattara-page .hattara-buy-wrap{margin:-52px 0 58px !important}
  body.hattara-page #silento-buy-now{width:148px !important;height:54px !important;min-height:54px !important}
  body.hattara-page .hattara-terminal-line{font-size:.68rem !important;line-height:1.45 !important}
  body.hattara-page .story-copy h2{font-size:clamp(34px,11vw,48px) !important}
  body.hattara-page .feature-card{padding:24px 22px !important}
}

@media(prefers-reduced-motion:reduce){
  body.hattara-page .engraved-cloud,
  body.hattara-page .engraved-wind,
  body.hattara-page .engraved-water,
  body.hattara-page #silento-buy-now{animation:none !important}
}
/* === END HATTARA APPROVED ENGRAVED JADE / GOLD FINAL AUTHORITY === */

/* ========================================================================== 
   HATTARA STATIC REFERENCE-MATCH PASS — 2026-09-09
   Exact copy/screenshots preserved. Static engraved assets derived from the
   user-approved hero reference replace the generic vector decoration.
   ========================================================================== */

body.hattara-page .silento-top{
  width:min(1288px,calc(100% - 64px)) !important;
  max-width:1288px !important;
  height:76px !important;
  margin:0 auto !important;
  padding:0 !important;
  background:rgba(3,16,17,.92) !important;
  border-bottom:1px solid rgba(220,183,96,.18) !important;
}

body.hattara-page .hattara-hero{
  min-height:calc(100svh - 76px) !important;
  padding-top:64px !important;
  padding-left:clamp(72px,11.3vw,190px) !important;
  padding-right:clamp(72px,11.3vw,190px) !important;
  padding-bottom:86px !important;
  background:
    radial-gradient(circle at 55% 52%,rgba(8,88,77,.10),transparent 25%),
    radial-gradient(circle at 83% 18%,rgba(8,57,53,.08),transparent 24%),
    linear-gradient(180deg,#041516 0%,#031213 100%) !important;
}
body.hattara-page .hattara-hero-copy-block{
  width:min(50vw,760px) !important;
  max-width:760px !important;
}
body.hattara-page .hattara-hero h1{
  max-width:760px !important;
  font-size:clamp(62px,4.85vw,82px) !important;
  line-height:.95 !important;
  letter-spacing:-.045em !important;
  margin-bottom:24px !important;
}
body.hattara-page .hattara-hero .hero-copy{
  max-width:670px !important;
  font-size:clamp(.95rem,1.0vw,1.04rem) !important;
  line-height:1.55 !important;
}
body.hattara-page .hero-version-slot{
  width:min(470px,36vw) !important;
  margin-top:34px !important;
}
body.hattara-page .version-menu summary{
  min-height:62px !important;
  grid-template-columns:1fr auto 28px !important;
  padding:0 20px 0 24px !important;
}

/* Approved-reference engraving: smaller, denser, and deliberately static. */
body.hattara-page .engraved-cloud,
body.hattara-page .engraved-wind,
body.hattara-page .engraved-water{
  animation:none !important;
  filter:none !important;
}
body.hattara-page .engraved-cloud-left{
  width:245px !important;
  left:-8px !important;
  top:14px !important;
  transform:none !important;
  opacity:.96 !important;
}
body.hattara-page .engraved-cloud-right{
  width:335px !important;
  right:-3px !important;
  top:115px !important;
  transform:none !important;
  opacity:.92 !important;
}
body.hattara-page .engraved-cloud-mid{
  width:280px !important;
  right:18.3% !important;
  top:43% !important;
  transform:none !important;
  opacity:.78 !important;
}
body.hattara-page .engraved-wind-upper{
  display:none !important;
}
body.hattara-page .engraved-wind-lower{
  width:690px !important;
  left:-34px !important;
  bottom:9.5% !important;
  transform:none !important;
  opacity:.77 !important;
}
body.hattara-page .engraved-water{
  width:890px !important;
  left:58.5% !important;
  bottom:3.5% !important;
  transform:translateX(-50%) !important;
  opacity:.96 !important;
}

/* Cotton candy proportions/placement from the approved composition. */
body.hattara-page .hattara-cotton-stage{
  left:54.8% !important;
  top:59% !important;
  width:clamp(270px,18.5vw,330px) !important;
  transform:translate(-50%,-50%) !important;
}
body.hattara-page .hattara-cotton-stage img{
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.32)) !important;
}

/* BUY remains simple and far right. */
body.hattara-page .hattara-buy-wrap{
  right:clamp(64px,9vw,150px) !important;
  top:53% !important;
}
body.hattara-page #silento-buy-now{
  width:250px !important;
  height:60px !important;
  min-height:60px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,rgba(6,75,66,.96),rgba(4,39,38,.99)) !important;
  animation:none !important;
  box-shadow:inset 0 1px 0 rgba(255,242,205,.07),0 16px 34px rgba(0,0,0,.24) !important;
}
body.hattara-page #silento-buy-now:hover{
  transform:none !important;
  background:linear-gradient(90deg,rgba(8,88,76,.98),rgba(5,47,44,.995)) !important;
}
body.hattara-page .silento-buy-word{
  font-size:.82rem !important;
  letter-spacing:.29em !important;
}
body.hattara-page .hattara-terminal-line{
  left:clamp(72px,11.3vw,190px) !important;
  bottom:24px !important;
}
body.hattara-page .hattara-hero::after{
  left:clamp(72px,11.3vw,190px) !important;
  right:clamp(72px,11.3vw,190px) !important;
}

/* Whole page uses the same engraved reference language, never blue SaaS cards. */
body.hattara-page .story-section{
  max-width:1288px !important;
  min-height:auto !important;
  padding:clamp(82px,7vw,116px) 0 !important;
  gap:clamp(48px,6vw,90px) !important;
  border-bottom:1px solid rgba(212,168,74,.18) !important;
  background:transparent !important;
}
body.hattara-page .story-section:nth-of-type(even){background:transparent !important}
body.hattara-page .story-section::before{
  width:260px !important;
  height:150px !important;
  right:-115px !important;
  top:30px !important;
  background:url("assets/decor_ref/cloud-right.png") center/contain no-repeat !important;
  opacity:.16 !important;
  transform:none !important;
}
body.hattara-page .story-section:nth-of-type(odd)::before{
  left:-110px !important;
  right:auto !important;
  background-image:url("assets/decor_ref/cloud-left.png") !important;
  transform:none !important;
}
body.hattara-page .story-section::after{
  left:0 !important;
  top:42px !important;
  width:92px !important;
}
body.hattara-page .story-copy h2{
  font-size:clamp(36px,3.8vw,58px) !important;
}
body.hattara-page .story-shot{
  border-color:rgba(212,168,74,.34) !important;
  border-radius:2px !important;
}
body.hattara-page .feature-card{
  background:rgba(5,39,37,.20) !important;
}
body.hattara-page .feature-card:hover{
  background:rgba(7,55,50,.25) !important;
}
body.hattara-page .site-footer{
  max-width:1288px !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

@media(max-width:1100px){
  body.hattara-page .silento-top{width:calc(100% - 48px) !important}
  body.hattara-page .hattara-hero{padding-left:42px !important;padding-right:42px !important}
  body.hattara-page .hattara-hero-copy-block{width:49vw !important}
  body.hattara-page .hattara-cotton-stage{left:61% !important;width:290px !important}
  body.hattara-page .hattara-buy-wrap{right:34px !important}
  body.hattara-page #silento-buy-now{width:178px !important}
  body.hattara-page .hattara-terminal-line{left:42px !important}
  body.hattara-page .hattara-hero::after{left:42px !important;right:42px !important}
  body.hattara-page .story-section{width:calc(100% - 64px) !important}
}

@media(max-width:860px){
  body.hattara-page .silento-top{width:calc(100% - 36px) !important}
  body.hattara-page .hattara-hero{padding:54px 24px 98px !important}
  body.hattara-page .hattara-hero-copy-block{width:100% !important}
  body.hattara-page .hattara-hero h1{font-size:clamp(48px,12.7vw,72px) !important}
  body.hattara-page .hero-version-slot{width:min(440px,100%) !important}
  body.hattara-page .hattara-cotton-stage{width:min(68vw,330px) !important;margin:46px auto 12px !important}
  body.hattara-page .hattara-buy-wrap{margin:-40px 0 52px !important}
  body.hattara-page .engraved-cloud-left{width:190px !important}
  body.hattara-page .engraved-cloud-right{width:245px !important;top:23% !important}
  body.hattara-page .engraved-cloud-mid{display:none !important}
  body.hattara-page .engraved-wind-lower{width:540px !important;left:-140px !important}
  body.hattara-page .engraved-water{width:690px !important;left:55% !important;bottom:2% !important}
  body.hattara-page .hattara-terminal-line{left:24px !important}
  body.hattara-page .hattara-hero::after{left:24px !important;right:24px !important}
  body.hattara-page .story-section{width:calc(100% - 44px) !important;padding:72px 0 !important}
  body.hattara-page .site-footer{width:calc(100% - 44px) !important}
}
/* === END HATTARA STATIC REFERENCE-MATCH PASS === */

/* ========================================================================== 
   HATTARA REFERENCE LOCK 3 — exact visual correction, cache-busted
   Existing copy/screenshots/functionality preserved.
   ========================================================================== */
@media (min-width: 1110px){
  body.hattara-page .silento-top{
    width:min(1268px,calc(100% - 96px)) !important;
    max-width:1268px !important;
    height:76px !important;
    margin:0 auto !important;
    padding:0 !important;
    background:rgba(3,16,17,.92) !important;
  }

  body.hattara-page .hattara-hero{
    width:100% !important;
    max-width:none !important;
    min-height:860px !important;
    height:calc(100svh - 76px) !important;
    max-height:920px !important;
    padding:0 !important;
    display:block !important;
    position:relative !important;
    overflow:hidden !important;
    background:
      radial-gradient(circle at 51% 56%,rgba(11,85,73,.10),transparent 29%),
      linear-gradient(180deg,#041516 0%,#031213 100%) !important;
  }

  body.hattara-page .hattara-hero-copy-block{
    position:absolute !important;
    z-index:20 !important;
    left:max(72px,calc(50% - 634px)) !important;
    top:64px !important;
    width:720px !important;
    max-width:720px !important;
    margin:0 !important;
  }
  body.hattara-page .hattara-hero .over{
    margin:0 0 16px !important;
    font-size:13px !important;
    letter-spacing:.20em !important;
  }
  body.hattara-page .hattara-hero h1{
    width:720px !important;
    max-width:720px !important;
    margin:0 0 26px !important;
    font-size:74px !important;
    line-height:.92 !important;
    letter-spacing:-.045em !important;
    font-weight:620 !important;
    white-space:normal !important;
  }
  body.hattara-page .hattara-hero .hero-copy{
    width:690px !important;
    max-width:690px !important;
    margin:0 !important;
    font-size:16px !important;
    line-height:1.55 !important;
  }
  body.hattara-page .hero-version-slot{
    width:468px !important;
    margin-top:34px !important;
  }
  body.hattara-page .version-menu summary{
    min-height:61px !important;
    border-radius:31px !important;
    padding:0 24px !important;
  }

  /* Exact transparent engravings extracted from the approved reference. */
  body.hattara-page .engraved-cloud,
  body.hattara-page .engraved-wind,
  body.hattara-page .engraved-water{
    animation:none !important;
    filter:none !important;
    mix-blend-mode:normal !important;
  }
  body.hattara-page .engraved-cloud-left{
    width:238px !important;
    left:-3px !important;
    top:24px !important;
    transform:none !important;
    opacity:1 !important;
  }
  body.hattara-page .engraved-cloud-right{
    width:292px !important;
    right:-1px !important;
    top:122px !important;
    transform:none !important;
    opacity:1 !important;
  }
  body.hattara-page .engraved-cloud-mid{
    width:250px !important;
    right:18.5% !important;
    top:42% !important;
    transform:none !important;
    opacity:.92 !important;
  }
  body.hattara-page .engraved-wind-upper{
    display:block !important;
    width:520px !important;
    left:38% !important;
    top:24% !important;
    transform:none !important;
    opacity:.45 !important;
  }
  body.hattara-page .engraved-wind-lower{
    display:block !important;
    width:520px !important;
    left:0 !important;
    bottom:15% !important;
    transform:none !important;
    opacity:.80 !important;
  }
  body.hattara-page .engraved-water{
    width:685px !important;
    left:50.5% !important;
    bottom:5.8% !important;
    transform:translateX(-50%) !important;
    opacity:1 !important;
  }

  body.hattara-page .hattara-cotton-stage{
    position:absolute !important;
    z-index:14 !important;
    left:50.5% !important;
    top:61.5% !important;
    width:278px !important;
    margin:0 !important;
    transform:translate(-50%,-50%) !important;
  }
  body.hattara-page .hattara-cotton-stage img{
    width:100% !important;
    height:auto !important;
    filter:drop-shadow(0 20px 26px rgba(0,0,0,.28)) !important;
  }

  body.hattara-page .hattara-buy-wrap{
    position:absolute !important;
    z-index:20 !important;
    right:64px !important;
    top:47.5% !important;
    margin:0 !important;
    transform:none !important;
  }
  body.hattara-page #silento-buy-now{
    width:248px !important;
    height:60px !important;
    min-height:60px !important;
    border-radius:31px !important;
    border:1px solid #d4a84a !important;
    background:linear-gradient(90deg,rgba(5,73,64,.97),rgba(3,38,37,.99)) !important;
    box-shadow:inset 0 1px 0 rgba(255,245,217,.08),0 12px 28px rgba(0,0,0,.22) !important;
    animation:none !important;
  }
  body.hattara-page #silento-buy-now::before,
  body.hattara-page #silento-buy-now::after{display:none !important}
  body.hattara-page .silento-buy-word{
    font-size:14px !important;
    letter-spacing:.26em !important;
  }

  body.hattara-page .hattara-terminal-line{
    position:absolute !important;
    z-index:20 !important;
    left:50% !important;
    bottom:17px !important;
    width:auto !important;
    margin:0 !important;
    transform:translateX(-50%) !important;
    font-size:12px !important;
    white-space:nowrap !important;
  }
  body.hattara-page .hattara-hero::after{
    left:max(72px,calc(50% - 634px)) !important;
    right:max(72px,calc(50% - 634px)) !important;
    bottom:46px !important;
  }

  /* Full-page continuation: no blue cards, same dark jade/gold field. */
  body.hattara-page .story-section{
    width:min(1268px,calc(100% - 96px)) !important;
    max-width:1268px !important;
    margin:0 auto !important;
    padding:92px 0 !important;
    border:0 !important;
    border-bottom:1px solid rgba(212,168,74,.20) !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  body.hattara-page .story-section::before{
    width:292px !important;
    height:165px !important;
    right:-112px !important;
    top:14px !important;
    background:url("assets/decor_lock3/cloud-right.png?v=3") center/contain no-repeat !important;
    opacity:.13 !important;
  }
  body.hattara-page .story-section:nth-of-type(odd)::before{
    left:-100px !important;
    right:auto !important;
    background-image:url("assets/decor_lock3/cloud-left.png?v=3") !important;
  }
  body.hattara-page .story-copy h2{color:#f1e7cb !important}
  body.hattara-page .story-copy p{color:#cfc3a5 !important}
  body.hattara-page .panel-over{color:#b9924a !important}
  body.hattara-page .story-shot{
    border:1px solid rgba(212,168,74,.36) !important;
    border-radius:2px !important;
    background:#061718 !important;
    box-shadow:0 24px 60px rgba(0,0,0,.25) !important;
  }
  body.hattara-page .feature-card,
  body.hattara-page .silento-download-block,
  body.hattara-page .release-spec-card{
    background:rgba(5,35,34,.34) !important;
    border-color:rgba(212,168,74,.24) !important;
    box-shadow:none !important;
  }
  body.hattara-page .site-footer{
    width:min(1268px,calc(100% - 96px)) !important;
    max-width:1268px !important;
    margin:0 auto !important;
    border-top:0 !important;
  }
}

/* Keep mobile/tablet responsive while retaining static engravings. */
@media (max-width:1109px){
  body.hattara-page .hattara-hero h1{font-size:clamp(48px,8vw,76px) !important}
  body.hattara-page .engraved-cloud,
  body.hattara-page .engraved-wind,
  body.hattara-page .engraved-water,
  body.hattara-page #silento-buy-now{animation:none !important}
}