/* SamNet public site: editorial layout, floating navigation and 3D stages. Builds on the tokens in app.css. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

.scroll-bar { position: fixed; inset-block-start: 0; inset-inline: 0; height: 2px; z-index: 60; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: right; pointer-events: none; }

/* floating navigation */
.site-head, .site-head.scrolled { top: 10px; background: none; backdrop-filter: none; border: 0; box-shadow: none; padding: 10px 0 0; }
.site-nav { width: min(1260px, calc(100% - 24px)); max-width: none; height: 62px; padding: 0 10px 0 20px; padding-inline: 20px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 76%, transparent); backdrop-filter: saturate(1.7) blur(18px); -webkit-backdrop-filter: saturate(1.7) blur(18px); box-shadow: 0 10px 34px -20px rgba(10,10,20,.4); transition: box-shadow .3s; }
.site-head.scrolled .site-nav { box-shadow: 0 16px 44px -20px rgba(10,10,20,.55); }
.site-nav nav a { border-radius: 99px; }
.site-nav .actions .btn-primary { border-radius: 99px; }

/* shared */
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: .84rem; font-weight: 600; color: var(--accent); margin-bottom: 10px; }
.kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .18em; margin-block: -.18em; }
.wi { display: inline-block; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.22; letter-spacing: -.02em; }

.scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene-wait > :not(.scene-canvas), .scene-ready > :not(.scene-canvas) { visibility: hidden; }
.scene-canvas { opacity: 0; transition: opacity .7s; }
.scene-ready > .scene-canvas { opacity: 1; }

/* home hero */
.hx { position: relative; min-height: min(100svh, 900px); display: flex; flex-direction: column; justify-content: center; margin-top: -82px; padding: 128px 0 34px; overflow: hidden; }
.hx-bg, .ph-bg { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 18% 44%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(50% 60% at 88% 8%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 72%); }
.hx-bg::after, .ph-bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 72px 72px; opacity: .5;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 76%); mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 76%); }
.hx-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 24px; width: 100%; flex: 1; }
.hx h1 { font-size: clamp(2.7rem, 6.2vw, 5.5rem); line-height: 1.16; letter-spacing: -.03em; margin: 18px 0 20px; }
.hx .lead { font-size: clamp(1.05rem, 1.5vw, 1.24rem); color: var(--muted); max-width: 600px; line-height: 1.9; }
.hx-stage { position: relative; aspect-ratio: 1; width: 100%; max-width: 640px; margin-inline: auto; display: grid; place-items: center; }
.hx-stage .logo3d { width: 76%; }
.hx-foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px 30px; padding-top: 24px; margin-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.hx-foot span { display: inline-flex; align-items: center; gap: 8px; }

/* ticker */
.ticker { overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); padding: 15px 0; }
.ticker-track { display: inline-flex; white-space: nowrap; animation: ticker 70s linear infinite; }
.ticker span { display: inline-flex; align-items: center; gap: 34px; padding-inline-end: 34px; font-size: 1.04rem; font-weight: 500; color: var(--muted); }
.ticker i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@keyframes ticker { to { transform: translateX(50%); } }

/* services bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.bento-card { --mx: 50%; --my: 0; position: relative; grid-column: span 2; display: flex; flex-direction: column; padding: 28px; min-height: 290px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; color: inherit; transition: border-color .3s, transform .4s cubic-bezier(.2,.7,.2,1); }
.bento-card:nth-child(6n+1), .bento-card:nth-child(6n+4) { grid-column: span 4; }
.bento-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(360px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.bento-card:hover { border-color: var(--line-2); transform: translateY(-4px); }
.bento-card:hover::before { opacity: 1; }
.bento-card > * { position: relative; }
.bento-no { position: absolute; top: 22px; inset-inline-end: 26px; font-size: .84rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.bento-card h3 { font-size: 1.3rem; margin: 6px 0 8px; }
.bento-card p { color: var(--muted); font-size: .96rem; margin: 0; max-width: 54ch; }
.bento-foot { margin-top: auto; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .92rem; color: var(--muted); }
.bento-foot strong { color: var(--text); }
.bento-go { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); transition: background .3s, color .3s, transform .3s; }
.bento-card:hover .bento-go { background: var(--ink); color: var(--surface); transform: translateX(-4px); }

/* journey */
.journey { padding: 88px 0; background: var(--surface); border-block: 1px solid var(--line); overflow: hidden; }
.journey-head { margin-bottom: 30px; }
.journey-head h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.22; }
.journey-head p { color: var(--muted); font-size: 1.05rem; }
.journey-rail { height: 2px; background: var(--line); margin-bottom: 26px; overflow: hidden; }
.journey-rail i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transform-origin: right; transform: scaleX(0); }
.journey-view { overflow: hidden; }
.journey-track { display: flex; gap: 16px; padding-inline: max(20px, calc((100vw - 1160px) / 2)); width: max-content; will-change: transform; }
.jstep { position: relative; width: clamp(320px, 34vw, 470px); min-height: 320px; flex: none; padding: 32px; border-radius: 26px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.jstep h3 { font-size: 1.5rem; margin: 8px 0; }
.jstep p { color: var(--muted); font-size: 1.02rem; max-width: 32ch; }
.jstep-no { position: absolute; inset-block-end: -46px; inset-inline-end: 14px; font-size: 13rem; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--line-2); }

/* numbers */
.numbers { background: #0b0b0f; color: #f4f4f7; padding: 76px 0; margin: 0; }
.numbers .stat b { font-size: clamp(2.5rem, 5.4vw, 4.4rem); letter-spacing: -.03em; line-height: 1.2; background: linear-gradient(180deg, #fff, #8f8f9c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.numbers .stat span { color: #a4a4b1; }

/* trust */
.trust { display: grid; grid-template-columns: .92fr 1.08fr; gap: 60px; align-items: center; }
.trust h2 { font-size: clamp(1.8rem, 3.5vw, 2.7rem); line-height: 1.26; }
.trust-art .illus { width: 100%; max-width: 520px; height: auto; margin-inline: auto; display: block; }
.trust-list { list-style: none; padding: 0; margin: 22px 0 24px; display: grid; gap: 16px; }
.trust-list li { display: flex; gap: 14px; }
.trust-list li > span { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--accent-soft); color: var(--accent); }
.trust-list strong { display: block; margin-bottom: 2px; }
.trust-list p { margin: 0; color: var(--muted); font-size: .95rem; }

/* inner page opener */
.ph { position: relative; margin-top: -82px; padding: 132px 0 34px; overflow: hidden; }
.ph-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 20px; }
.ph h1 { font-size: clamp(2.3rem, 5vw, 4.2rem); line-height: 1.18; letter-spacing: -.03em; margin: 14px 0 14px; }
.ph .lead { font-size: 1.12rem; color: var(--muted); max-width: 620px; line-height: 1.9; margin: 0; }
.ph-stage { position: relative; height: clamp(250px, 30vw, 390px); display: grid; place-items: center; }
.ph-stage .illus { width: 100%; max-width: 360px; height: auto; }
.ph + .section { padding-top: 40px; }

/* call to action */
.cta-x { padding: clamp(36px, 6vw, 76px); isolation: isolate; }
.cta-x h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.22; }
.cta-scene { position: absolute; inset: 0; z-index: 0; opacity: .75; }
.cta.cta-x::after { z-index: 0; }

/* footer */
.site-foot { --surface: #0b0b0f; --surface-3: #1b1b23; --text: #ececf1; --muted: #9c9caa; --faint: #6f6f7c; --line: #26262f; --line-2: #383844; --ink: #f4f4f7; background: #0b0b0f; color: #ececf1; border: 0; padding-top: 72px; margin-top: 48px; overflow: hidden; }
.site-foot .brand { color: #fff; }
.site-foot hr { border-color: #26262f; }
.foot-mark { font-size: clamp(5rem, 22vw, 20rem); line-height: .86; font-weight: 700; letter-spacing: -.05em; text-align: center; direction: ltr; margin: 34px 0 -.14em; background: linear-gradient(180deg, #2a2a34, #0b0b0f 92%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }

@media (max-width: 959px) {
  .hx, .ph { margin-top: -78px; padding-top: 112px; }
  .hx-grid, .ph-grid, .trust { grid-template-columns: 1fr; }
  .hx { min-height: 0; }
  .hx-stage { order: -1; max-width: 250px; }
  .ph-stage { order: -1; height: 190px; }
  .bento-card, .bento-card:nth-child(6n+1), .bento-card:nth-child(6n+4) { grid-column: span 6; min-height: 240px; }
  .journey-view { overflow: visible; }
  .journey-track { flex-direction: column; width: auto; }
  .jstep { width: auto; min-height: 220px; }
  .jstep-no { font-size: 9rem; inset-block-end: -30px; }
  .journey-rail { display: none; }
  .trust { gap: 26px; }
}
@media (max-width: 1040px) {
  body.nav-open .site-nav nav { position: absolute; top: calc(100% + 8px); inset-inline: 0; flex-direction: column; gap: 2px; margin: 0; padding: 10px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); z-index: 41; }
  body.nav-open .site-nav nav a { padding: 11px 14px; }
  .site-nav { position: relative; }
  body.nav-open .site-head { z-index: 55; }
}
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } .scroll-bar { display: none; } }

/* English edition */
.lang-switch { font-weight: 700; font-size: .84rem; }
[dir="ltr"] .scroll-bar, [dir="ltr"] .journey-rail i { transform-origin: left; }
[dir="ltr"] .ticker-track { animation-name: ticker-ltr; }
[dir="ltr"] .bento-card:hover .bento-go { transform: translateX(4px); }
@keyframes ticker-ltr { to { transform: translateX(-50%); } }
.consent{position:fixed;inset-inline:16px;bottom:16px;z-index:60;max-width:560px;margin-inline:auto;background:var(--surface,#fff);color:inherit;border:1px solid var(--line,#e5e7eb);border-radius:14px;padding:14px 16px;box-shadow:0 12px 40px rgba(0,0,0,.18);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.consent[hidden]{display:none}
.consent p{margin:0;flex:1 1 280px;font-size:.88rem}
.consent-actions{display:flex;gap:8px}