/*
Theme Name: SPTIO Smart Solutions
Theme URI: https://sptio.com/
Author: SPTIO
Author URI: https://sptio.com/
Description: SPTIO's custom WordPress block theme for technology, automation, AI and business operations.
Version: 0.3.0
Requires at least: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: sptio
*/

:root {
  --sptio-navy: #071A2B;
  --sptio-blue: #0B5FFF;
  --sptio-electric: #2F80FF;
  --sptio-ink: #11283C;
  --sptio-muted: #667085;
  --sptio-border: #E7ECF2;
  --sptio-cloud: #F4F7FA;
  --sptio-blue-tint: #EEF5FF;
  --sptio-white: #FFFFFF;
  --sptio-radius-xl: 34px;
  --sptio-radius-lg: 24px;
  --sptio-radius-md: 18px;
  --sptio-shadow: 0 18px 55px rgba(7,26,43,.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--sptio-ink); background: #fff; }
a { color: inherit; }

.sptio-container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.sptio-wide { width: min(1360px, calc(100% - 40px)); margin-inline: auto; }
.sptio-section { padding-block: clamp(76px, 9vw, 132px); }
.sptio-section-tight { padding-block: clamp(44px, 6vw, 82px); }
.sptio-eyebrow { display:inline-flex; align-items:center; gap:8px; width:fit-content; margin:0; padding:8px 13px; border:1px solid rgba(11,95,255,.16); border-radius:999px; color:var(--sptio-blue); background:rgba(255,255,255,.72); font-size:.72rem; font-weight:800; letter-spacing:.10em; text-transform:uppercase; }
.sptio-kicker { margin:0 0 14px; color:var(--sptio-blue); font-size:.85rem; font-weight:800; letter-spacing:.02em; }
.sptio-lead { max-width: 720px; color:#566577; font-size:clamp(1.05rem,1.65vw,1.25rem); line-height:1.75; }
.sptio-muted { color:var(--sptio-muted); }
.sptio-small { font-size:.88rem; line-height:1.65; }
.sptio-display { letter-spacing:-.055em; line-height:.98; }

.sptio-grid-light { background-color: var(--sptio-cloud); background-image: linear-gradient(rgba(7,26,43,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(7,26,43,.035) 1px, transparent 1px); background-size: 56px 56px; }
.sptio-grid-dark { background-color: var(--sptio-navy); background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 62px 62px; }
.sptio-blue-tint { background:var(--sptio-blue-tint); }

.sptio-card { background:#fff; border:1px solid var(--sptio-border); border-radius:var(--sptio-radius-lg); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.sptio-card:hover { transform:translateY(-4px); box-shadow:var(--sptio-shadow); border-color:#D8E2EC; }
.sptio-card-blue { background:linear-gradient(180deg,#0B5FFF 0%,#0A55E4 100%); color:#fff; border-radius:var(--sptio-radius-lg); box-shadow:0 18px 45px rgba(11,95,255,.18); }
.sptio-card-dark { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--sptio-radius-lg); }
.sptio-pill { display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:6px 11px; border-radius:999px; background:#F7F9FB; border:1px solid var(--sptio-border); color:#566577; font-size:.72rem; font-weight:800; }
.sptio-link { color:var(--sptio-blue); text-decoration:none; font-weight:800; }
.sptio-link:hover { text-decoration:underline; }
.sptio-arrow { display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.16); margin-left:8px; }

.sptio-site-header { position:relative; z-index:20; backdrop-filter: blur(12px); }
.sptio-site-header .wp-block-site-title a { text-decoration:none; }
.sptio-site-header .wp-block-navigation-item__content { font-size:.86rem; font-weight:650; text-decoration:none; }
.sptio-site-header .wp-block-navigation-item__content:hover { color:var(--sptio-blue); }
.sptio-header-cta .wp-block-button__link { border-radius:999px !important; padding:10px 14px !important; font-size:.82rem !important; }

.sptio-system-shell { position:relative; }
.sptio-system { background:rgba(255,255,255,.82); border:1px solid rgba(231,236,242,.9); border-radius:30px; padding:18px; box-shadow:0 35px 90px rgba(7,26,43,.10); backdrop-filter: blur(18px); }
.sptio-shadow-float { animation:sptioFloat 8s ease-in-out infinite; }
@keyframes sptioFloat { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} }
.sptio-window { overflow:hidden; border:1px solid #E7ECF2; border-radius:22px; background:#fff; box-shadow:0 12px 35px rgba(7,26,43,.08); }
.sptio-window-top { display:flex; align-items:center; gap:6px; padding:10px 12px; border-bottom:1px solid #EFF3F7; background:#FBFCFD; }
.sptio-window-top i { display:block; width:7px; height:7px; border-radius:50%; background:#CCD5DE; }
.sptio-window-body { display:grid; grid-template-columns:150px 1fr; min-height:380px; }
.sptio-window-side { padding:18px 14px; background:#FBFCFD; border-right:1px solid #EFF3F7; }
.sptio-mini-item { padding:9px 10px; margin:4px 0; border-radius:10px; color:#728093; font-size:.7rem; font-weight:700; }
.sptio-mini-item.active { color:var(--sptio-blue); background:var(--sptio-blue-tint); }
.sptio-window-main { padding:20px; }
.sptio-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.sptio-metric { padding:13px; border:1px solid #E8EEF4; border-radius:15px; }
.sptio-metric span { display:block; color:#8390A0; font-size:.6rem; }
.sptio-metric strong { display:block; margin-top:5px; font-size:1.2rem; letter-spacing:-.04em; }
.sptio-chart { height:126px; margin-top:14px; border-radius:16px; background:linear-gradient(180deg,rgba(11,95,255,.10),rgba(11,95,255,.015)); position:relative; overflow:hidden; }
.sptio-chart:after { content:""; position:absolute; inset:18px 10px 20px; background:linear-gradient(160deg, transparent 0 18%, rgba(11,95,255,.12) 18% 20%, transparent 20% 35%, rgba(11,95,255,.16) 35% 37%, transparent 37% 50%, rgba(11,95,255,.12) 50% 52%, transparent 52%); border-top:2px solid rgba(11,95,255,.72); clip-path:polygon(0 72%,12% 66%,25% 73%,37% 44%,48% 58%,61% 28%,75% 38%,88% 12%,100% 22%,100% 100%,0 100%); }
.sptio-node-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.sptio-node-box { display:flex; flex-direction:column; gap:5px; padding:14px; background:#fff; border:1px solid #E7ECF2; border-radius:16px; box-shadow:0 8px 22px rgba(7,26,43,.04); }
.sptio-node-box span { color:#8290A0; font-size:.65rem; }

.sptio-flow { position:relative; }
.sptio-flow-line { position:absolute; top:28px; left:6%; right:6%; height:1px; background:#DCE5EF; }
.sptio-flow-item { position:relative; z-index:1; padding-right:20px; }
.sptio-flow-num { display:flex; width:42px; height:42px; align-items:center; justify-content:center; margin-bottom:20px; border:1px solid #DCE5EF; border-radius:50%; background:#fff; color:var(--sptio-blue); font-size:.72rem; font-weight:900; }
.sptio-flow-item:first-child .sptio-flow-num { background:var(--sptio-blue); color:#fff; border-color:var(--sptio-blue); }

.sptio-stat { padding:26px; border-radius:22px; background:#fff; border:1px solid var(--sptio-border); }
.sptio-stat strong { display:block; font-size:clamp(2.3rem,4vw,4rem); letter-spacing:-.06em; line-height:1; }
.sptio-stat span { display:block; margin-top:10px; color:#6B7888; }

.sptio-process-card { min-height:210px; padding:28px; border-radius:22px; background:#fff; border:1px solid var(--sptio-border); }
.sptio-process-card .number { color:var(--sptio-blue); font-size:.75rem; font-weight:900; letter-spacing:.08em; }

.sptio-page-hero { padding-block:clamp(74px,8vw,116px); }
.sptio-page-hero .sptio-hero-copy { max-width: 900px; }
.sptio-page-hero h1 { max-width:900px; }

.sptio-quote { padding:36px; border-left:4px solid var(--sptio-blue); border-radius:0 18px 18px 0; background:var(--sptio-cloud); }
.sptio-quote p { margin:0; font-size:clamp(1.35rem,2.3vw,2rem); line-height:1.35; letter-spacing:-.03em; }

.sptio-form-note { padding:20px 22px; border-radius:18px; background:var(--sptio-blue-tint); border:1px solid rgba(11,95,255,.12); }

.wp-block-button__link { border-radius:999px; font-weight:800; padding:13px 18px; }
.is-style-outline .wp-block-button__link { border:1px solid #DCE4EC; }
.wp-block-navigation .wp-block-navigation-item { white-space:nowrap; }

.sptio-footer a { text-decoration:none; }
.sptio-footer a:hover { text-decoration:underline; }

@media (max-width: 980px) {
  .sptio-window-body { grid-template-columns:110px 1fr; }
  .sptio-flow-line { display:none; }
}
@media (max-width: 780px) {
  .sptio-container,.sptio-wide { width:min(100% - 28px, 1180px); }
  .sptio-section { padding-block:72px; }
  .sptio-window-body { grid-template-columns:1fr; }
  .sptio-window-side { display:none; }
  .sptio-metrics { grid-template-columns:1fr; }
  .sptio-node-row { grid-template-columns:1fr; }
  .sptio-flow-item { padding-right:0; }
  .sptio-site-header { border-radius:20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .sptio-shadow-float { animation:none; }
  .sptio-card { transition:none; }
}