/* =============================================================
   SiloTech — SiloForge platform sub-pages (how / codes / demos /
   pricing). Loaded after site.css and service.css.
   ============================================================= */


/* ---- page head ---- */
.sf-phead { padding-block: clamp(48px,7vw,92px) clamp(34px,4vw,52px); }
.sf-phead h1 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(2.2rem,5vw,4rem); color: var(--st-cream); margin: 20px 0 0; line-height: 1.02; }
.sf-phead h1 .ac { color: var(--accent-soft); }
.sf-phead .lead { margin-top: 20px; }
.sup { font-size: 0.42em; vertical-align: super; font-weight: 400; }

/* ---- how it works: 4 steps ---- */
.sf-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: clamp(32px,4vw,52px); }
.sf-step { border-top: 3px solid var(--accent); background: var(--st-charcoal-200); padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; min-height: 188px; }
.sf-step .n { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--accent-soft); }
.sf-step h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.012em; font-size: 1.04rem; color: var(--st-cream); margin: 0; line-height: 1.1; }
.sf-step p { margin: auto 0 0; font-size: 0.9rem; color: var(--st-stone-400); }
@media (max-width: 860px){ .sf-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .sf-steps { grid-template-columns: 1fr; } }

/* ---- figures ---- */
.sf-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: clamp(32px,4vw,52px); }
.sf-fig .cap { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--st-stone-500); margin-bottom: 12px; }
.sf-fig .cap .id { color: var(--accent); }
.sf-fig .frame { border: 1px solid rgba(249,249,242,0.10); background: var(--bg-panel); padding: 14px; }
.sf-fig img { width: 100%; height: auto; display: block; }
@media (max-width: 760px){ .sf-figs { grid-template-columns: 1fr; gap: 28px; } }

/* ---- codes ticker ---- */
.codes-ticker { overflow: hidden; width: 100%; margin-top: 28px; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%); }
.codes-ticker:hover .codes-track { animation-play-state: paused; }
.codes-track { display: flex; align-items: center; white-space: nowrap; width: max-content; animation: codes-roll 32s linear infinite; }
.codes-track span:not(.codes-dot) { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--st-navy-100); padding: 0 20px; }
.codes-track .codes-dot { color: var(--st-orange); text-shadow: 0 0 6px var(--st-orange), 0 0 14px rgba(184,84,31,0.55); padding: 0 2px; font-size: 0.55rem; line-height: 1; }
@keyframes codes-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.code-group { margin-top: clamp(28px,4vw,44px); }
.code-group .gh { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 6px; }
.code-group .gh::before { content: ""; width: 18px; height: 2px; background: var(--accent); }

/* ---- demos ---- */
.demo-group { margin-top: clamp(34px,4vw,56px); }
.demo-group .gh { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--st-stone-500); display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.demo-group .gh::after { content: ""; flex: 1; height: 1px; background: rgba(249,249,242,0.12); }
.demo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.demo { border: 1px solid rgba(249,249,242,0.09); background: #16213B; display: flex; flex-direction: column; transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease), border-color 0.18s var(--ease); }
.demo:hover { transform: translateY(-3px); box-shadow: 0 16px 38px -16px rgba(0,0,0,0.7); border-color: rgba(249,249,242,0.18); }
.demo .screen { position: relative; aspect-ratio: 16/9; background: var(--st-charcoal); background-image: radial-gradient(rgba(249,249,242,0.10) 1px, transparent 1.6px); background-size: 20px 20px; display: grid; place-items: center; border-bottom: 1px solid rgba(249,249,242,0.09); }
.demo .screen .play { width: 52px; height: 52px; border: 2px solid var(--accent); border-radius: 50%; display: grid; place-items: center; transition: background 0.16s var(--ease); }
.demo:hover .screen .play { background: var(--accent); }
.demo .screen .play::before { content: ""; width: 0; height: 0; border-left: 14px solid var(--accent); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; transition: border-color 0.16s var(--ease); }
.demo:hover .screen .play::before { border-left-color: var(--st-cream); }
.demo .screen .ico { position: absolute; left: 12px; top: 12px; width: 40px; height: 40px; opacity: 0.9; }
.demo .meta { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.demo .meta .nm { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.012em; font-size: 0.98rem; color: var(--st-cream); }
.demo .meta .st { font-size: 0.88rem; color: var(--st-navy-100); }
@media (max-width: 860px){ .demo-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .demo-grid { grid-template-columns: 1fr; } }

/* ---- pricing ---- */
.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: clamp(32px,4vw,52px); align-items: stretch; }
.price { border: 1px solid rgba(249,249,242,0.09); background: #16213B; padding: 28px 26px; display: flex; flex-direction: column; gap: 18px; }
.price.feat { background: var(--st-navy); border-color: var(--st-navy); color: var(--st-cream); }
.price .pk { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.price.feat .pk { color: var(--accent-soft); }
.price h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.015em; font-size: 1.3rem; color: var(--st-cream); margin: 0; line-height: 1.05; }
.price.feat h3 { color: var(--st-cream); }
.price .desc { font-size: 0.92rem; color: var(--st-navy-100); margin: 0; }
.price.feat .desc { color: var(--st-navy-100); }
.price .amt { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--st-navy-200); border-top: 1px solid rgba(249,249,242,0.12); padding-top: 16px; }
.price.feat .amt { color: var(--st-navy-100); border-top-color: rgba(249,249,242,0.16); }
.price ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.price li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.92rem; color: var(--st-navy-100); }
.price.feat li { color: var(--st-navy-100); }
.price li::before { content: ""; width: 8px; height: 8px; margin-top: 6px; background: var(--accent); flex: none; }
.price .go { margin-top: auto; }
@media (max-width: 860px){ .price-grid { grid-template-columns: 1fr; } }

.terms-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(249,249,242,0.10); border: 1px solid rgba(249,249,242,0.10); margin-top: clamp(28px,4vw,44px); }
.term { background: var(--bg-panel); padding: 24px; }
.term .l { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.term h4 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.012em; font-size: 1rem; color: var(--st-cream); margin: 10px 0 8px; }
.term p { margin: 0; font-size: 0.9rem; color: var(--st-navy-100); }
@media (max-width: 760px){ .terms-grid { grid-template-columns: 1fr; } }

.sep-note { margin-top: clamp(28px,4vw,44px); background: var(--st-charcoal); border-top: 3px solid var(--accent); padding: 24px clamp(22px,3vw,32px); }
.sep-note .l { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-soft); font-size: 0.78rem; }
.sep-note p { margin: 10px 0 0; font-size: 1rem; line-height: 1.55; color: var(--st-stone-100); max-width: 76ch; }

.cta-band { text-align: center; }
.cta-band .btn-row { justify-content: center; margin-top: 30px; }
.note-line { margin-top: 22px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--st-stone-500); display: flex; gap: 9px; }
.note-line::before { content: ""; width: 14px; height: 2px; margin-top: 6px; background: var(--accent); flex: none; }
.on-dark .note-line { color: var(--st-navy-200); }