/* Global typography: Poppins on every website element */
html,
body,
body *,
button,
input,
select,
textarea,
option,
::placeholder {
  font-family: 'Poppins', Arial, sans-serif !important;
}

:root{
  --ink:#101a2f;
  --muted:#667085;
  --primary:#6558e8;
  --primary-dark:#493bc7;
  --cyan:#19b8c9;
  --accent:#ff8b5b;
  --navy:#0b1020;
  --navy-2:#121a31;
  --surface:#ffffff;
  --soft:#f6f7fb;
  --soft-2:#eef1f8;
  --line:#e3e7f0;
  --white:#ffffff;
  --shadow:0 24px 70px rgba(21,27,53,.12);
  --shadow-soft:0 14px 38px rgba(30,36,66,.08);
  --radius:24px;
  --header-h:80px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;font-family:'Poppins',Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary-dark);text-decoration:none}
a:hover{color:var(--primary)}
button,input,textarea{font:inherit}
.container{width:min(1140px,calc(100% - 40px));margin-inline:auto}
.section{padding:100px 0;position:relative;overflow:hidden}
.section.soft{background:linear-gradient(180deg,#f8f9fd 0%,#f2f4fa 100%)}
.section.dark{background:radial-gradient(circle at 12% 20%,rgba(101,88,232,.25),transparent 34%),radial-gradient(circle at 90% 80%,rgba(25,184,201,.18),transparent 30%),var(--navy);color:#fff}
.section-head{max-width:790px;margin:0 auto 48px;text-align:center;position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 13px;padding:8px 13px;border:1px solid rgba(101,88,232,.18);border-radius:999px;background:rgba(101,88,232,.07);color:var(--primary-dark);font-size:.78rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--cyan));box-shadow:0 0 0 4px rgba(101,88,232,.10)}
.dark .eyebrow{color:#dcd8ff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.section h2{font-size:clamp(2rem,4vw,3rem);line-height:1.16;letter-spacing:-.025em;margin:0 0 16px;color:var(--ink)}
.dark h2{color:#fff}
.section-head p{margin:0;color:var(--muted);font-size:1.03rem}
.dark .section-head p{color:#c3cbda}
.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(101,88,232,.28)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 25px;border:1px solid transparent;border-radius:14px;font-weight:800;transition:.22s ease;cursor:pointer;position:relative;overflow:hidden}
.btn-primary{background:linear-gradient(135deg,var(--primary),#7668f1);color:#fff;box-shadow:0 14px 30px rgba(101,88,232,.34)}
.btn-primary:hover{color:#fff;transform:translateY(-3px);box-shadow:0 18px 38px rgba(101,88,232,.42)}
.btn-secondary{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.32);color:#fff;backdrop-filter:blur(12px)}
.btn-secondary:hover{background:#fff;color:var(--navy);transform:translateY(-3px)}
.btn-light{background:#fff;color:var(--navy);box-shadow:0 12px 25px rgba(0,0,0,.14)}
.btn-light:hover{color:var(--primary-dark);transform:translateY(-3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.10);backdrop-filter:blur(10px);color:#fff;font-size:.84rem;font-weight:700}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(25,184,201,.18)}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;height:var(--header-h);background:#071426;backdrop-filter:none;border-bottom:1px solid rgba(255,255,255,.08);transition:.25s}
.site-header.scrolled{background:#071426;box-shadow:0 14px 34px rgba(4,8,20,.28)}
.nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;padding:0;background:transparent;border:0;box-shadow:none}
.brand img{width:265px;height:auto}
.nav-menu{display:flex;align-items:center;gap:23px}
.nav-menu a{font-size:.88rem;font-weight:700;color:#c9d1e0;transition:.2s}
.nav-menu a:hover,.nav-menu a.active{color:#fff}
.nav-menu .nav-cta{color:#fff;background:linear-gradient(135deg,var(--primary),var(--cyan));padding:11px 17px;border-radius:12px;box-shadow:0 10px 22px rgba(101,88,232,.25)}
.nav-menu .nav-cta:hover{color:#fff;transform:translateY(-2px)}
.menu-toggle{display:none;width:45px;height:45px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font-size:1.35rem}

/* Image-background hero */
.hero{min-height:690px;padding:108px 0 96px;display:flex;align-items:center;position:relative;isolation:isolate;background-image:linear-gradient(rgba(5,10,24,.38),rgba(5,10,24,.48)),url('../images/hero-sakuritadino.webp');background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff;overflow:hidden}
.hero:before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 50% 46%,rgba(8,18,40,.08),rgba(4,9,22,.32) 72%)}
.hero:after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:-1px;height:92px;background:linear-gradient(to top,#fff,transparent)}
.hero-grid{display:flex;justify-content:center;position:relative;z-index:1}
.hero-grid>div:first-child{width:min(900px,100%);margin:0 auto;padding:44px 46px;border:1px solid rgba(255,255,255,.12);border-radius:30px;background:rgba(7,20,38,.46);backdrop-filter:blur(10px);box-shadow:0 28px 80px rgba(0,0,0,.28);text-align:center}
.hero .eyebrow{color:#e4e0ff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.hero h1{font-size:clamp(2.65rem,5.8vw,5rem);line-height:1.02;letter-spacing:-.045em;margin:16px 0 23px;color:#fff;text-shadow:0 6px 28px rgba(0,0,0,.30)}
.hero h1 span{background:linear-gradient(90deg,#b9b2ff,#63e8f3);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:1.08rem;color:#d5dbea;max-width:720px;margin:0 auto 28px}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px;justify-content:center}
.hero-visual{display:none}
.trust-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:25px;color:#d6dceb;font-size:.87rem;font-weight:700;justify-content:center}
.trust-row span:before{content:"✓";color:#6ce1ec;margin-right:7px}

/* Homepage sections */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.about-copy{position:relative}
.about-copy h2{text-align:left}
.about-copy p{color:var(--muted)}
.about-copy img{border-radius:28px;margin-top:28px;border:1px solid var(--line);box-shadow:var(--shadow)}
.info-panel{padding:36px;background:linear-gradient(145deg,#fff,#f4f5fb)}
.info-panel h3{margin:0 0 18px;color:var(--ink);font-size:1.5rem}
.info-list{display:grid;gap:10px}
.info-row{display:grid;grid-template-columns:155px 1fr;gap:20px;padding:16px;border:1px solid #e8eaf2;border-radius:14px;background:#fff}
.info-row strong{color:var(--ink)}
.info-row span{color:var(--muted)}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature-card{padding:27px 23px;min-height:230px;position:relative;overflow:hidden}
.feature-card:before{content:"";position:absolute;right:-46px;top:-46px;width:125px;height:125px;border-radius:50%;background:linear-gradient(135deg,rgba(101,88,232,.13),rgba(25,184,201,.09))}
.icon-box{width:50px;height:50px;border-radius:15px;background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff;display:grid;place-items:center;font-weight:900;margin-bottom:19px;box-shadow:0 12px 22px rgba(101,88,232,.22)}
.feature-card h3{margin:0 0 9px;color:var(--ink);font-size:1.08rem}
.feature-card p{margin:0;color:var(--muted);font-size:.92rem}
.process-shell{padding:42px;background:linear-gradient(145deg,#10172d,#0b1020);border:1px solid rgba(255,255,255,.08);border-radius:30px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.process-shell:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-100px;bottom:-140px;background:rgba(25,184,201,.12);filter:blur(10px)}
.process-line{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step;position:relative;z-index:1}
.process-step{position:relative;padding:25px 20px 22px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.055);border-radius:18px;color:#fff}
.process-step:before{counter-increment:step;content:"0" counter(step);display:block;color:#7ce9f3;font-weight:900;font-size:.82rem;letter-spacing:.1em;margin-bottom:12px}
.process-step:not(:last-child):after{content:"→";position:absolute;right:-17px;top:50%;transform:translateY(-50%);color:#7ce9f3;font-size:1.5rem;font-weight:900}
.process-step h3{margin:0 0 8px;color:#fff;font-size:1.05rem}
.process-step p{margin:0;color:#bcc6d8;font-size:.9rem}
.compat-grid,.use-grid,.pros-grid,.trouble-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:21px}
.compat-card,.use-card,.trouble-card{padding:28px}
.compat-card h3,.use-card h3,.trouble-card h3{margin:0 0 10px;color:var(--ink)}
.compat-card p,.use-card p,.trouble-card p{margin:0;color:var(--muted)}
.compat-card .status{display:inline-flex;margin-top:16px;padding:7px 11px;border-radius:999px;background:#eceaff;color:var(--primary-dark);font-size:.78rem;font-weight:800}
.use-card{border-left:4px solid var(--primary)}
.download-shell{display:grid;grid-template-columns:1fr .88fr;gap:54px;align-items:center;padding:58px;border-radius:34px;background:radial-gradient(circle at 85% 20%,rgba(25,184,201,.20),transparent 30%),linear-gradient(135deg,#111832,#080d1b);color:#fff;box-shadow:0 30px 80px rgba(8,13,27,.25);border:1px solid rgba(255,255,255,.08)}
.download-shell h2{color:#fff;text-align:left;margin-top:0}
.download-shell p{color:#c8d0df}
.download-shell ul{padding-left:20px;color:#dce2ed}
.download-shell img{border-radius:24px;border:1px solid rgba(255,255,255,.15);box-shadow:0 22px 50px rgba(0,0,0,.28)}
.download-meta{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.download-meta .pill{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.16)}
.notice{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:32px;border-radius:24px;background:linear-gradient(135deg,#fff8f2,#fff);border:1px solid #f4d8c8;box-shadow:var(--shadow-soft)}
.notice-icon{width:56px;height:56px;border-radius:17px;background:linear-gradient(135deg,var(--accent),#f06d55);color:#fff;display:grid;place-items:center;font-size:1.4rem;font-weight:900;box-shadow:0 12px 24px rgba(255,139,91,.25)}
.notice h2{font-size:1.6rem;margin:0 0 8px}
.notice p{margin:0;color:#6d5e57}
.check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
.check-item{padding:18px;border:1px solid #efdcd1;border-radius:15px;background:rgba(255,255,255,.9)}
.check-item strong{display:block;color:var(--ink);margin-bottom:4px}
.check-item span{color:var(--muted);font-size:.9rem}
.install-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:40px}
.install-side{padding:32px;background:linear-gradient(145deg,var(--primary-dark),#31288f);border-radius:26px;color:#fff;align-self:start;position:sticky;top:105px;box-shadow:var(--shadow)}
.install-side h3{margin-top:0}
.install-side p{color:#dddafd}
.install-steps{display:grid;gap:18px}
.install-step{padding:27px 29px;display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start}
.step-number{width:50px;height:50px;border-radius:15px;background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff;display:grid;place-items:center;font-weight:900;box-shadow:0 12px 22px rgba(101,88,232,.22)}
.install-step h3{margin:2px 0 7px;color:var(--ink)}
.install-step p{margin:0;color:var(--muted)}
.release-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.release-table th,.release-table td{text-align:left;padding:18px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.release-table th{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff}
.release-table tr:last-child td{border-bottom:0}
.release-table td:first-child{font-weight:800;color:var(--ink);width:25%}
.release-table td:last-child{color:var(--muted)}
.pros-grid{grid-template-columns:1fr 1fr}
.pros-card{padding:34px}
.pros-card h3{margin:0 0 18px;font-size:1.35rem}
.pros-card.good{border-top:5px solid var(--cyan)}
.pros-card.caution{border-top:5px solid var(--accent)}
.clean-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.clean-list li{position:relative;padding-left:27px;color:var(--muted)}
.good .clean-list li:before{content:"✓";position:absolute;left:0;color:var(--cyan);font-weight:900}
.caution .clean-list li:before{content:"!";position:absolute;left:6px;color:var(--accent);font-weight:900}
.guides-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.guide-card{overflow:hidden}
.guide-card img{aspect-ratio:16/9;object-fit:cover;transition:transform .4s ease}
.guide-card:hover img{transform:scale(1.04)}
.guide-card-body{padding:24px}
.guide-card .meta{font-size:.77rem;font-weight:800;color:var(--primary-dark);text-transform:uppercase;letter-spacing:.08em}
.guide-card h3{margin:8px 0 10px;font-size:1.16rem;line-height:1.35}
.guide-card p{margin:0 0 14px;color:var(--muted);font-size:.9rem}
.text-link{font-weight:800;color:var(--primary-dark)}

/* FAQ */
.faq-shell{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start}
.faq-tabs{display:grid;gap:11px;position:sticky;top:105px}
.faq-tab{padding:17px 18px;border:1px solid var(--line);background:#fff;border-radius:14px;text-align:left;font-weight:800;color:var(--ink);cursor:pointer;box-shadow:var(--shadow-soft)}
.faq-tab.active{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;border-color:transparent}
.faq-panel{display:none}
.faq-panel.active{display:block}
.faq-item{border:1px solid var(--line);border-radius:16px;background:#fff;margin-bottom:12px;overflow:hidden;box-shadow:0 8px 25px rgba(31,38,70,.05)}
.faq-question{width:100%;display:flex;justify-content:space-between;gap:20px;align-items:center;text-align:left;padding:20px 22px;border:0;background:#fff;color:var(--ink);font-weight:800;cursor:pointer}
.faq-question span:last-child{width:30px;height:30px;border-radius:50%;background:#f0efff;color:var(--primary-dark);display:grid;place-items:center;flex:none;transition:.25s}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.faq-answer>div{overflow:hidden}
.faq-answer p{margin:0;padding:0 22px 21px;color:var(--muted)}
.faq-item.open{border-color:rgba(101,88,232,.35)}
.faq-item.open .faq-answer{grid-template-rows:1fr}
.faq-item.open .faq-question span:last-child{background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff;transform:rotate(45deg)}

/* Footer */
.site-footer{background:#071426;color:#d2d8e6;padding:76px 0 24px;border-top:1px solid rgba(255,255,255,.07)}
.footer-grid{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:54px}
.footer-brand>a{display:inline-flex;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
.footer-brand img{width:275px;filter:none;opacity:1}
.footer-brand p{max-width:440px;color:#aab5c9}
.footer-title{color:#fff;font-size:1rem;margin:0 0 16px}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.footer-links a{color:#b9c4d5}
.footer-links a:hover{color:#fff}
.footer-bottom{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;border-top:1px solid rgba(255,255,255,.10);padding-top:23px;margin-top:48px;font-size:.86rem;color:#93a1b8}
.footer-bottom a{color:#fff}
.scroll-top{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border:0;border-radius:15px;background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff;display:none;place-items:center;font-weight:900;box-shadow:0 16px 30px rgba(101,88,232,.32);z-index:800}
.scroll-top.show{display:grid}

/* Inner pages */
.page-hero{padding:92px 0 82px;position:relative;color:#fff;background-image:linear-gradient(rgba(7,20,38,.74),rgba(7,20,38,.78)),url('../images/hero-sakuritadino.webp');background-size:cover;background-position:center;border-bottom:1px solid rgba(255,255,255,.08)}
.page-hero:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:54px;background:linear-gradient(to top,#fff,transparent)}
.page-hero .container{position:relative;z-index:1}
.page-hero .breadcrumbs{font-size:.85rem;color:#bbc5d8;margin-bottom:16px}
.page-hero .breadcrumbs a{color:#fff}
.page-hero h1{font-size:clamp(2.3rem,5vw,4.2rem);line-height:1.08;letter-spacing:-.035em;margin:0 0 16px;color:#fff;max-width:930px}
.page-hero p{font-size:1.05rem;color:#d2d8e5;max-width:780px;margin:0}
.content-wrap{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:40px;align-items:start}
.article-content{min-width:0}
.article-content h2{font-size:2rem;margin:44px 0 14px;color:var(--ink);letter-spacing:-.02em}
.article-content h3{font-size:1.35rem;margin:30px 0 10px;color:var(--ink)}
.article-content p,.article-content li{color:var(--muted)}
.article-content .lead{font-size:1.1rem;color:#48556b}
.article-content img.feature{border-radius:26px;border:1px solid var(--line);margin-bottom:34px;box-shadow:var(--shadow)}
.article-content table{width:100%;border-collapse:collapse;margin:24px 0;border-radius:15px;overflow:hidden}
.article-content th,.article-content td{padding:14px;border:1px solid var(--line);text-align:left}
.article-content th{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff}
.sidebar{position:sticky;top:105px;display:grid;gap:18px}
.side-card{padding:25px}
.side-card h3{margin:0 0 14px;color:var(--ink)}
.side-links{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.side-links a{font-weight:700}
.blog-featured{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:stretch;margin-bottom:36px;background:linear-gradient(145deg,#fff,#f6f7fb)}
.blog-featured img{height:100%;object-fit:cover;border-radius:23px}
.blog-featured .copy{padding:38px}
.blog-featured h2{margin:10px 0 12px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.legal-box{max-width:900px;margin:auto}
.legal-box h2{text-align:left}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.contact-card{padding:33px}
.contact-card h2{font-size:1.5rem;text-align:left}
.email-plain{display:inline-block;padding:14px 18px;border-radius:13px;background:#efeeff;font-weight:900;color:var(--primary-dark);word-break:break-all}
.reveal{opacity:0;transform:translateY(24px);transition:.65s ease}
.reveal.visible{opacity:1;transform:none}

/* Small security notice displayed only when shortcuts are blocked */
.security-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:3000;padding:12px 18px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(8,13,27,.94);color:#fff;font-size:.86rem;font-weight:700;box-shadow:0 18px 40px rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:.25s}
.security-toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:980px){
  .nav-menu{position:fixed;left:20px;right:20px;top:90px;padding:20px;background:rgba(9,14,29,.98);border:1px solid rgba(255,255,255,.12);box-shadow:0 22px 50px rgba(0,0,0,.30);border-radius:18px;display:none;align-items:stretch;flex-direction:column;gap:4px}
  .nav-menu.open{display:flex}
  .nav-menu a{padding:11px 10px}
  .menu-toggle{display:block}
  .about-grid,.download-shell,.install-layout,.content-wrap,.blog-featured{grid-template-columns:1fr}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .process-line{grid-template-columns:repeat(2,1fr)}
  .process-step:nth-child(2):after{display:none}
  .compat-grid,.use-grid,.trouble-grid,.guides-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .install-side,.sidebar{position:static}
  .faq-shell{grid-template-columns:1fr}
  .faq-tabs{position:static;grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .hero{min-height:650px;background-position:60% center}
  .hero-grid>div:first-child{max-width:760px}
}
@media(max-width:640px){
  .container{width:calc(100% - 28px);max-width:1140px}
  .section{padding:72px 0}
  .hero{min-height:auto;padding:76px 0 90px;background-position:64% center}
  .hero-grid>div:first-child{padding:28px 22px;border-radius:23px}
  .hero h1{font-size:2.55rem}
  .hero p{font-size:1rem}
  .hero-badges .pill:nth-child(2){display:none}
  .features-grid,.process-line,.compat-grid,.use-grid,.trouble-grid,.guides-grid,.blog-grid,.pros-grid,.check-grid,.contact-grid,.footer-grid{grid-template-columns:1fr}
  .process-step:after{display:none!important}
  .process-shell,.download-shell{padding:28px}
  .download-shell h2{font-size:2rem}
  .info-row{grid-template-columns:1fr;gap:3px}
  .faq-tabs{grid-template-columns:1fr}
  .brand{padding:7px 10px}
  .brand img{width:220px}
  .install-step{grid-template-columns:1fr}
  .blog-featured .copy{padding:27px}
  .page-hero{padding:66px 0 70px}
  .article-content h2{font-size:1.65rem}
  .release-table{display:block;overflow-x:auto;white-space:normal}
  .footer-brand>a{padding:10px 12px}
  .footer-brand img{width:205px}
  .btn-row{flex-direction:column;align-items:stretch}
  .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.btn,.card,.guide-card img{transition:none}}

.hero .btn-row{justify-content:center}
@media(max-width:640px){.hero h1{font-size:2.35rem}}

/* =========================================================
   Screenshot-reference redesign: unified navy + teal system
   ========================================================= */
:root{
  --ink:#f5f8fb;
  --muted:#aeb9c8;
  --primary:#08d0ad;
  --primary-dark:#00a98e;
  --cyan:#08d0ad;
  --accent:#08d0ad;
  --navy:#03111e;
  --navy-2:#071827;
  --surface:#071827;
  --soft:#061523;
  --soft-2:#0a1d2d;
  --line:rgba(143,169,188,.22);
  --white:#fff;
  --shadow:0 24px 70px rgba(0,0,0,.28);
  --shadow-soft:0 14px 38px rgba(0,0,0,.18);
  --radius:14px;
  --header-h:70px;
}
html{scroll-padding-top:88px}
body{font-family:'Poppins','Segoe UI',Arial,sans-serif;background:#041321;color:#eef5f7;line-height:1.65}
a{color:#17d8b8}
a:hover{color:#7ff5df}
.container{width:min(1200px,calc(100% - 42px))}
.section{padding:72px 0;background:#041321;color:#eef5f7;border-top:1px solid rgba(255,255,255,.025)}
.section.soft{background:#061625}
.section.dark{background:#03111e}
.section h2,.section h3,.section h4{color:#f8fafc}
.section-head{max-width:760px;margin-bottom:36px}
.section-head p,.section p{color:#aeb9c8}
.eyebrow{padding:0;border:0;background:transparent;color:#08d0ad;font-size:.72rem;letter-spacing:.08em;margin-bottom:8px}
.eyebrow:before{display:none}
.card{background:linear-gradient(145deg,rgba(8,27,42,.96),rgba(5,18,31,.98));border:1px solid rgba(135,161,181,.23);border-radius:14px;box-shadow:none}
.card:hover{border-color:rgba(8,208,173,.62);box-shadow:0 18px 42px rgba(0,0,0,.23);transform:translateY(-4px)}
.btn{min-height:47px;padding:0 24px;border-radius:8px;font-size:.9rem}
.btn-primary{background:#08d0ad;color:#03111e;box-shadow:0 10px 25px rgba(8,208,173,.22)}
.btn-primary:hover{background:#20e0c0;color:#021019;box-shadow:0 15px 32px rgba(8,208,173,.30)}
.btn-secondary{background:rgba(4,17,30,.46);border-color:rgba(255,255,255,.60);color:#fff;backdrop-filter:blur(6px)}
.btn-secondary:hover{background:#fff;color:#03111e}
.btn-light{background:#08d0ad;color:#03111e}

/* Header */
.site-header{height:70px;background:#02111d;border-bottom:1px solid rgba(255,255,255,.07)}
.site-header.scrolled{background:#02111d;box-shadow:0 12px 28px rgba(0,0,0,.34)}
.nav-wrap{gap:20px}
.brand img{width:230px}
.nav-menu{gap:28px}
.nav-menu a{color:#f4f7f8;font-size:.82rem;font-weight:700}
.nav-menu a:hover,.nav-menu a.active{color:#08d0ad}
.nav-menu .nav-cta{background:#08d0ad;color:#02111d;padding:11px 19px;border-radius:7px;box-shadow:none}
.nav-menu .nav-cta:hover{background:#24e2c1;color:#02111d}
.menu-toggle{border-color:rgba(8,208,173,.45);background:rgba(8,208,173,.08);color:#08d0ad;border-radius:8px}

/* Screenshot style hero */
.hero{min-height:430px;padding:48px 0 28px;background-image:linear-gradient(180deg,rgba(4,15,27,.14),rgba(2,13,24,.22)),url('../images/hero-wave-gray.webp');background-size:cover;background-position:center;color:#fff}
.hero:before{background:linear-gradient(180deg,rgba(13,28,43,.08),rgba(1,13,24,.2))}
.hero:after{display:none}
.hero-center{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-kicker{display:inline-flex;align-items:center;justify-content:center;padding:6px 16px;border-radius:999px;background:rgba(2,24,33,.72);color:#08d0ad;font-size:.72rem;font-weight:800;letter-spacing:.08em;margin:0 0 10px;border:1px solid rgba(8,208,173,.18)}
.hero h1{font-size:clamp(3rem,6vw,4.7rem);line-height:1;margin:0 0 8px;color:#fff;text-transform:none;text-shadow:0 5px 24px rgba(0,0,0,.3)}
.hero h2{font-size:clamp(1.35rem,2.6vw,2rem);margin:0 0 12px;color:#08d0ad;letter-spacing:-.02em}
.hero-description{max-width:760px;margin:0 auto 22px!important;color:#f3f6f8!important;font-size:1rem!important}
.hero-description strong{color:#08d0ad}
.hero-actions{justify-content:center;margin-bottom:27px}
.hero-trust-grid{width:min(760px,100%);display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:2px}
.hero-trust{display:flex;align-items:center;justify-content:center;gap:12px;text-align:left;color:#fff}
.hero-trust .trust-icon{display:grid;place-items:center;width:32px;height:32px;color:#08d0ad;font-size:1.65rem;font-weight:900}
.hero-trust strong{display:block;font-size:.84rem;line-height:1.25}
.hero-trust small{display:block;color:#cad3dd;font-size:.69rem;line-height:1.3;margin-top:3px}

/* About and feature preview */
.about-section{padding:48px 0 40px;background:radial-gradient(circle at 50% 0,rgba(8,208,173,.035),transparent 32%),#041321}
.screenshot-about{grid-template-columns:1.08fr .92fr;gap:38px}
.about-visual{padding:0;overflow:hidden;border-radius:13px;min-height:300px}
.about-visual img{width:100%;height:100%;min-height:300px;object-fit:cover;border-radius:0}
.about-copy h2{font-size:2rem;margin:4px 0 13px}
.about-copy p{font-size:.92rem;margin:0 0 12px}
.check-list{list-style:none;padding:0;margin:16px 0 20px;display:grid;gap:8px}
.check-list li{color:#eaf1f4;font-size:.88rem;position:relative;padding-left:25px}
.check-list li:before{content:'✓';position:absolute;left:0;color:#08d0ad;font-weight:900}
.outline-link{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:42px;padding:0 24px;border:1px solid #08d0ad;border-radius:6px;color:#08d0ad;font-size:.84rem;font-weight:700}
.outline-link:hover{background:#08d0ad;color:#03111e}
.feature-section{padding:38px 0 56px;background:#041321}
.compact-head{margin-bottom:28px}
.compact-head h2{font-size:2.1rem;margin-bottom:8px}
.screenshot-features{grid-template-columns:repeat(6,1fr);gap:14px}
.screenshot-features .feature-card{min-height:190px;padding:20px 15px;text-align:center}
.screenshot-features .icon-box{width:50px;height:50px;margin:0 auto 13px;border-radius:50%;background:transparent;color:#08d0ad;font-size:2rem;box-shadow:none}
.screenshot-features .feature-card:before{display:none}
.screenshot-features h3{font-size:.88rem;margin-bottom:8px}
.screenshot-features p{font-size:.76rem;line-height:1.5;color:#b8c2cf}

/* Remaining homepage sections */
.process-shell{background:#061827;border-color:rgba(8,208,173,.20);border-radius:15px;padding:32px}
.process-step{background:#071c2d;border-color:rgba(137,165,184,.20);border-radius:10px}
.process-step:before,.process-step:not(:last-child):after{color:#08d0ad}
.compat-grid,.use-grid,.pros-grid,.trouble-grid{gap:16px}
.compat-card,.use-card,.trouble-card{padding:24px}
.compat-card .status{background:rgba(8,208,173,.10);color:#48e5cb}
.use-card{border-left-color:#08d0ad}
.download-shell{background:radial-gradient(circle at 85% 20%,rgba(8,208,173,.13),transparent 28%),#03111e;border-color:rgba(8,208,173,.22);border-radius:16px;padding:45px}
.download-shell p,.download-shell li{color:#b9c5d0}
.info-panel{background:#061827;padding:30px}
.info-row{background:#071c2d;border-color:rgba(137,165,184,.18);border-radius:8px}
.info-row strong{color:#fff}.info-row span{color:#b5c0cc}
.guide-card-body h3,.guide-card-body h3 a{color:#fff}
.guide-card-body p{color:#aeb9c8}
.meta{color:#08d0ad}
.release-table th,.article-content th{background:#08d0ad;color:#03111e}
.release-table td,.article-content td{background:#061827;color:#c7d0da;border-color:rgba(137,165,184,.18)}
.pro-card,.con-card{background:#061827}
.faq-shell{background:transparent}
.faq-tabs{background:#061827;border-color:rgba(137,165,184,.18)}
.faq-tab{color:#aeb9c8}
.faq-tab.active{background:#08d0ad;color:#03111e}
.faq-item{background:#061827;border-color:rgba(137,165,184,.20)}
.faq-question{color:#fff}.faq-answer p{color:#aeb9c8}

/* Inner pages */
.page-hero{background-image:linear-gradient(rgba(3,17,30,.52),rgba(3,17,30,.72)),url('../images/hero-wave-gray.webp');border-color:rgba(255,255,255,.07)}
.page-hero:after{display:none}
.page-hero .breadcrumbs{color:#9fb0bf}.page-hero p{color:#bec9d3}
.content-wrap{gap:34px}
.article-content h2,.article-content h3,.article-content h4{color:#fff}
.article-content p,.article-content li,.article-content .lead{color:#aeb9c8}
.article-content img.feature{border-color:rgba(137,165,184,.20);box-shadow:var(--shadow)}
.side-card,.legal-box,.contact-card,.blog-featured{background:#061827;color:#eef5f7;border-color:rgba(137,165,184,.20)}
.side-card h3,.contact-card h2,.blog-featured h2{color:#fff}
.side-links a{color:#35ddc1}
.blog-featured{background:#061827}
.blog-featured .copy p{color:#aeb9c8}
.email-plain{background:rgba(8,208,173,.10);color:#49e1c8}

/* Footer */
.site-footer{background:#02111d;padding:34px 0 14px;border-top:1px solid rgba(255,255,255,.07)}
.footer-five{grid-template-columns:1.35fr .72fr .72fr .88fr .96fr;gap:30px}
.footer-brand img{width:230px}
.footer-brand p,.footer-note p{font-size:.79rem;line-height:1.55;color:#b4c0cb;margin:10px 0}
.footer-email{word-break:break-word}
.footer-title{font-size:.92rem;margin-bottom:12px}
.footer-links{gap:7px}
.footer-links a{font-size:.78rem;color:#d0d8df}
.footer-links a:hover{color:#08d0ad}
.footer-download{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:10px 15px;border:1px solid #08d0ad;border-radius:6px;color:#08d0ad;font-size:.78rem;font-weight:700}
.footer-download:hover{background:#08d0ad;color:#03111e}
.footer-bottom{margin-top:24px;padding-top:13px;gap:4px;font-size:.76rem;color:#929fac}
.footer-bottom a{color:#08d0ad}
.scroll-top{background:#08d0ad;color:#03111e;border-radius:8px;box-shadow:0 10px 28px rgba(8,208,173,.22)}

@media(max-width:1100px){
  .nav-menu{gap:18px}
  .nav-menu a{font-size:.77rem}
  .screenshot-features{grid-template-columns:repeat(3,1fr)}
  .footer-five{grid-template-columns:1.3fr repeat(2,1fr)}
  .footer-note{grid-column:auto}
}
@media(max-width:980px){
  .nav-menu{top:80px;background:#02111d;border-color:rgba(8,208,173,.25)}
  .screenshot-about{grid-template-columns:1fr}
  .about-visual{order:1}.about-copy{order:2}
  .hero-trust-grid{grid-template-columns:repeat(2,1fr);max-width:620px}
  .footer-five{grid-template-columns:repeat(2,1fr)}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:640px){
  .container{width:calc(100% - 28px)}
  .brand img{width:205px}
  .hero{padding:48px 0 36px;min-height:520px;background-position:center}
  .hero h1{font-size:2.8rem}
  .hero h2{font-size:1.22rem}
  .hero-description{font-size:.9rem!important}
  .hero-actions{width:100%}
  .hero-trust-grid{grid-template-columns:1fr 1fr;gap:16px 8px}
  .hero-trust{justify-content:flex-start}
  .hero-trust strong{font-size:.74rem}.hero-trust small{font-size:.62rem}
  .screenshot-features{grid-template-columns:repeat(2,1fr)}
  .screenshot-features .feature-card{min-height:180px}
  .about-copy h2,.compact-head h2{font-size:1.8rem}
  .footer-five{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
}

/* =========================================================
   Final blue mountain reference design
   ========================================================= */
:root{
  --ink:#10243b;
  --muted:#64748b;
  --primary:#1f7cff;
  --primary-dark:#0e62df;
  --cyan:#3aa3ff;
  --accent:#1f7cff;
  --navy:#06172b;
  --navy-2:#0a213b;
  --surface:#ffffff;
  --soft:#f5f9ff;
  --soft-2:#edf5ff;
  --line:#dce7f3;
  --white:#ffffff;
  --shadow:0 22px 55px rgba(18,54,91,.12);
  --shadow-soft:0 10px 30px rgba(18,54,91,.08);
  --radius:16px;
  --header-h:70px;
}
html{scroll-padding-top:86px}
body{background:#fff;color:var(--ink);font-family:'Poppins','Segoe UI',Arial,sans-serif;line-height:1.62}
a{color:var(--primary-dark)}
a:hover{color:var(--primary)}
.container{width:min(1140px,calc(100% - 40px))}
.section{padding:78px 0;background:#fff;color:var(--ink);border-top:0}
.section.soft{background:linear-gradient(180deg,#f8fbff 0%,#f2f7fd 100%)}
.section.dark{background:var(--navy);color:#fff}
.section h2,.section h3,.section h4{color:var(--ink)}
.section.dark h2,.section.dark h3,.section.dark h4{color:#fff}
.section p,.section-head p{color:var(--muted)}
.section.dark p,.section.dark .section-head p{color:#c0ccda}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft)}
.card:hover{border-color:#a9cdfd;box-shadow:var(--shadow);transform:translateY(-4px)}
.eyebrow{color:var(--primary);background:transparent;border:0;padding:0;letter-spacing:.09em}
.eyebrow:before{display:none}
.btn{min-height:48px;border-radius:10px;padding:0 26px;font-size:.9rem}
.btn-primary,.btn-light{background:linear-gradient(135deg,#2687ff,#116be8);color:#fff;box-shadow:0 12px 28px rgba(22,111,235,.24)}
.btn-primary:hover,.btn-light:hover{background:linear-gradient(135deg,#3691ff,#176fef);color:#fff;transform:translateY(-2px)}
.btn-secondary{border-color:rgba(255,255,255,.7);color:#fff;background:rgba(0,24,54,.18)}
.btn-secondary:hover{background:#fff;color:#0b2a4a}

/* Header */
.site-header{height:70px;background:#06172b;border-bottom:1px solid rgba(255,255,255,.07)}
.site-header.scrolled{background:#06172b;box-shadow:0 12px 30px rgba(1,14,29,.28)}
.nav-wrap{gap:25px}
.brand img{width:220px;max-height:52px}
.nav-menu{gap:27px}
.nav-menu a{color:#f1f5f9;font-size:.82rem;font-weight:600}
.nav-menu a:hover,.nav-menu a.active{color:#55a4ff}
.nav-menu a.active{position:relative}
.nav-menu a.active:not(.nav-cta):after{content:"";position:absolute;left:0;right:0;bottom:-15px;height:2px;background:#2d8bff;border-radius:99px}
.nav-menu .nav-cta{background:linear-gradient(135deg,#2c8bff,#1672ee);color:#fff;padding:11px 19px;border-radius:8px;box-shadow:0 10px 24px rgba(28,117,239,.28)}
.nav-menu .nav-cta:hover{background:linear-gradient(135deg,#3c96ff,#1c79f5);color:#fff}
.menu-toggle{border-color:rgba(75,151,255,.42);background:rgba(54,138,255,.12);color:#fff;border-radius:9px}

/* Mountain hero */
.hero.hero-reference{min-height:430px;padding:58px 0 48px;display:flex;align-items:center;background-image:linear-gradient(180deg,rgba(11,72,131,.28),rgba(4,48,91,.44)),url('../images/hero-mountain-lake.svg');background-position:center 45%;background-size:cover;background-repeat:no-repeat;color:#fff;isolation:isolate}
.hero.hero-reference:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,40,80,.09),rgba(0,40,80,.02) 45%,rgba(0,40,80,.1))}
.hero.hero-reference:after{display:none}
.hero-reference-inner{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1}
.hero-premium{display:inline-flex!important;align-items:center;gap:8px;margin:0 0 13px!important;padding:7px 15px;border:1px solid rgba(255,255,255,.72);border-radius:999px;background:rgba(20,86,156,.38);backdrop-filter:blur(5px);color:#fff!important;font-size:.72rem!important;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.hero-premium span{width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:#1f7cff;font-size:.65rem}
.hero.hero-reference h1{font-size:clamp(3.2rem,6vw,5.15rem);line-height:.97;letter-spacing:.012em;margin:0 0 14px;color:#fff;text-shadow:0 5px 25px rgba(2,27,55,.32)}
.hero-lead{font-size:1.02rem!important;margin:0 0 4px!important;color:#fff!important;max-width:760px!important;text-shadow:0 2px 12px rgba(0,24,53,.35)}
.hero-points{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin:0 0 23px!important;color:#fff!important;font-size:.92rem!important}
.hero-points span{color:#8dc5ff}.hero-points strong{font-weight:600}
.hero-actions-reference{justify-content:center;margin:0 0 27px}
.btn-blue{background:linear-gradient(135deg,#2c8bff,#116de9);color:#fff;box-shadow:0 12px 28px rgba(2,60,127,.28)}
.btn-blue:hover{background:linear-gradient(135deg,#3a96ff,#1a76f1);color:#fff;transform:translateY(-2px)}
.btn-glass{background:rgba(5,51,99,.25);border:1px solid rgba(255,255,255,.75);color:#fff;backdrop-filter:blur(5px)}
.btn-glass:hover{background:#fff;color:#145eaa;transform:translateY(-2px)}
.hero-info-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;width:min(760px,100%)}
.hero-info-card{display:flex;align-items:center;justify-content:flex-start;gap:11px;min-height:58px;padding:10px 16px;border:1px solid rgba(255,255,255,.38);border-radius:10px;background:rgba(22,78,133,.23);backdrop-filter:blur(5px);text-align:left;box-shadow:0 10px 24px rgba(3,35,72,.1)}
.hero-info-icon{display:grid;place-items:center;width:29px;height:29px;border:1px solid rgba(255,255,255,.7);border-radius:8px;color:#fff;font-weight:800;flex:none}
.hero-info-card strong{display:block;color:#fff;font-size:.72rem;line-height:1.2}
.hero-info-card small{display:block;color:#edf6ff;font-size:.62rem;line-height:1.25;margin-top:3px}

/* About reference */
.about-reference{padding:54px 0 46px;background:#fff}
.about-reference-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center}
.about-reference-copy{padding-left:8px}
.reference-kicker{margin:0 0 8px!important;color:var(--primary)!important;font-size:.72rem!important;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.about-reference-copy h2{font-size:2rem;line-height:1.15;margin:0 0 15px;color:var(--ink)}
.about-reference-copy h2 span,.reference-section-head h2 span{color:var(--primary)}
.about-reference-copy>p:not(.reference-kicker){max-width:535px;font-size:.9rem;line-height:1.7;margin:0;color:#536579}
.about-mini-features{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:27px}
.about-mini-features>div{padding:0 13px;text-align:center;border-right:1px solid #dce6f1}
.about-mini-features>div:first-child{padding-left:0}.about-mini-features>div:last-child{border-right:0;padding-right:0}
.about-mini-features span{display:block;color:var(--primary);font-size:1.8rem;line-height:1;margin-bottom:8px;font-weight:700}
.about-mini-features strong{display:block;color:#18314e;font-size:.78rem;line-height:1.3}
.about-mini-features small{display:block;color:#6a7b8f;font-size:.63rem;line-height:1.35;margin-top:3px}

/* Original HTML dashboard preview */
.panel-preview{overflow:hidden;border:3px solid #1f7cff;border-radius:14px;background:#06172b;box-shadow:0 18px 40px rgba(16,76,137,.18);min-height:285px}
.panel-window-bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;color:#8195aa;font-size:.58rem;background:#07182b;border-bottom:1px solid rgba(255,255,255,.05)}
.panel-app-mark{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#1f7cff;color:#fff;font-size:.48rem;font-weight:900}
.window-controls{margin-left:auto;display:flex;gap:8px}.window-controls i{width:6px;height:6px;border:1px solid #6b7d8e;border-radius:50%}
.panel-window-body{display:grid;grid-template-columns:98px 1fr;min-height:248px}
.panel-sidebar{padding:15px 10px;background:#081b30;border-right:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;gap:7px;color:#778ba0;font-size:.54rem}
.panel-sidebar strong{padding:7px 8px;border-radius:5px;background:#1f7cff;color:#fff;font-size:.55rem}
.panel-sidebar span{padding:5px 8px}
.panel-main{padding:14px 16px 13px;min-width:0}
.panel-main h3{color:#fff!important;font-size:.78rem;margin:0 0 11px}
.panel-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.panel-stat-grid>div{padding:9px;border-radius:7px;background:#0b223a;border:1px solid rgba(255,255,255,.035)}
.panel-stat-grid small{display:block;color:#8196a9;font-size:.47rem}.panel-stat-grid strong{display:block;color:#7bdda7;font-size:.58rem;margin-top:3px}
.panel-info-box{margin-top:11px;padding:10px;border:1px solid rgba(115,151,184,.18);border-radius:7px;background:#091d32}
.panel-info-box h4{color:#dbe9f6!important;font-size:.55rem;margin:0 0 8px}
.panel-info-box dl{margin:0;display:grid;gap:5px}.panel-info-box dl>div{display:flex;justify-content:space-between;gap:15px;color:#8ea1b5;font-size:.46rem}.panel-info-box dt,.panel-info-box dd{margin:0}
.panel-main button{width:100%;height:22px;border:0;border-radius:3px;margin-top:10px;background:#1f7cff;color:#fff;font-size:.5rem;pointer-events:none}

/* Feature preview */
.features-reference{padding:28px 0 58px;background:linear-gradient(180deg,#f8fbff 0%,#f2f7fd 100%)}
.reference-section-head{margin:0 auto 25px;text-align:center}
.reference-section-head h2{font-size:2rem;margin:0;position:relative;display:inline-block}
.reference-section-head h2:after{content:"";display:block;width:31px;height:2px;margin:8px auto 0;border-radius:99px;background:var(--primary)}
.reference-feature-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.reference-feature-card{min-height:166px;padding:20px 18px;border:1px solid #e4edf6;border-radius:12px;background:#fff;box-shadow:0 9px 25px rgba(23,65,106,.055);transition:.25s}
.reference-feature-card:hover{transform:translateY(-4px);border-color:#bcd8fb;box-shadow:0 15px 32px rgba(23,65,106,.1)}
.reference-feature-card>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid #cfe3ff;color:var(--primary);font-size:1.25rem;margin-bottom:12px}
.reference-feature-card h3{font-size:.82rem;line-height:1.25;margin:0 0 6px;color:#17314c}
.reference-feature-card p{margin:0!important;color:#62758a!important;font-size:.69rem!important;line-height:1.45}

/* Matching light system for all remaining homepage sections */
.process-shell{background:linear-gradient(145deg,#0b2a4a,#06172b);border-color:rgba(255,255,255,.08);border-radius:18px}
.process-step{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12)}
.process-step:before,.process-step:not(:last-child):after{color:#55a4ff}
.compat-card,.use-card,.trouble-card{background:#fff;border-color:var(--line)}
.compat-card h3,.use-card h3,.trouble-card h3{color:var(--ink)}
.compat-card p,.use-card p,.trouble-card p{color:var(--muted)}
.compat-card .status{background:#eaf3ff;color:#145fae}
.use-card{border-left-color:var(--primary)}
.download-shell{background:radial-gradient(circle at 85% 20%,rgba(55,146,255,.16),transparent 30%),linear-gradient(135deg,#0b2a4a,#06172b);border-color:rgba(255,255,255,.09);border-radius:20px}
.download-shell h2{color:#fff}.download-shell p,.download-shell li{color:#c5d2df}
.notice{background:#eef6ff;border-color:#b9d6f7;color:var(--ink)}
.notice h2{color:var(--ink)}
.notice p{color:#5d7085}
.check-item{background:#fff;border-color:#dce8f5}.check-item span{color:#62758a}
.install-side{background:linear-gradient(145deg,#0b2a4a,#06172b)}
.install-step{background:#fff}.install-step h3{color:var(--ink)}.install-step p{color:var(--muted)}
.release-table th,.article-content th{background:#1f7cff;color:#fff}
.release-table td,.article-content td{background:#fff;color:#52657a;border-color:#dce7f3}
.pro-card,.con-card,.pros-card{background:#fff}
.faq-tabs{background:#fff;border-color:var(--line)}
.faq-tab{background:#fff;color:#243a53;border-color:var(--line)}
.faq-tab.active{background:#1f7cff;color:#fff}
.faq-item{background:#fff;border-color:var(--line)}
.faq-question{background:#fff;color:#19324e}.faq-answer p{color:#617388}
.faq-question span:last-child{background:#eaf3ff;color:#1f7cff}
.faq-item.open .faq-question span:last-child{background:#1f7cff;color:#fff}
.guide-card-body h3,.guide-card-body h3 a{color:#18314e}.guide-card-body p{color:#68798c}.meta{color:#1f7cff}

/* Inner pages in same blue/white identity */
.page-hero{background-image:linear-gradient(rgba(5,43,81,.56),rgba(3,39,75,.68)),url('../images/hero-mountain-lake.svg');background-position:center 42%;border-bottom:0}
.page-hero:after{display:none}
.page-hero .breadcrumbs{color:#d5e7f7}.page-hero p{color:#e1edf7}
.content-wrap{gap:36px}
.article-content h2,.article-content h3,.article-content h4{color:var(--ink)}
.article-content p,.article-content li,.article-content .lead{color:#5d6f83}
.article-content img.feature{border-color:var(--line);box-shadow:var(--shadow)}
.side-card,.legal-box,.contact-card,.blog-featured{background:#fff;color:var(--ink);border-color:var(--line)}
.side-card h3,.contact-card h2,.blog-featured h2{color:var(--ink)}
.side-links a{color:#176de3}
.blog-featured{background:#fff}.blog-featured .copy p{color:#62758a}
.email-plain{background:#eaf3ff;color:#155fae}

/* Footer matching the reference */
.site-footer{background:#06172b;color:#d3deea;padding:33px 0 13px;border-top:1px solid rgba(255,255,255,.06)}
.footer-reference-grid{grid-template-columns:1.35fr .72fr .72fr .9fr .8fr;gap:42px;align-items:start}
.footer-brand>a{padding:0}.footer-brand img{width:205px;max-height:50px}
.footer-brand p,.footer-contact p{margin:11px 0 0;max-width:290px;color:#becbd8;font-size:.72rem;line-height:1.5}
.footer-brand strong{color:#2e8dff}
.footer-title{font-size:.82rem;margin:0 0 10px;color:#fff}
.footer-links{gap:5px}.footer-links a{font-size:.7rem;color:#d4dee8}.footer-links a:hover{color:#4b9aff}
.plain-email{color:#2f8fff!important;font-weight:600;word-break:break-word}
.social-dots{display:flex;gap:8px;margin-top:14px}.social-dots span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#2584f5;color:#fff;font-size:.66rem;font-weight:700}
.footer-reference-bottom{margin-top:20px;padding-top:12px;gap:2px;font-size:.7rem;color:#c7d1dc}
.footer-reference-bottom a{color:#2f8fff}
.scroll-top{background:#1f7cff;color:#fff;border-radius:9px;box-shadow:0 10px 28px rgba(31,124,255,.24)}

@media(max-width:1100px){
  .nav-menu{gap:18px}.nav-menu a{font-size:.76rem}
  .reference-feature-grid{grid-template-columns:repeat(3,1fr)}
  .footer-reference-grid{grid-template-columns:1.3fr repeat(2,1fr)}
  .footer-contact{grid-column:auto}
}
@media(max-width:980px){
  .nav-menu{top:80px;background:#06172b;border-color:rgba(73,151,255,.25)}
  .nav-menu a.active:not(.nav-cta):after{display:none}
  .about-reference-grid{grid-template-columns:1fr;gap:36px}
  .about-reference-copy{padding-left:0;text-align:center}.about-reference-copy>p:not(.reference-kicker){margin-inline:auto}.about-mini-features{max-width:620px;margin-inline:auto;margin-top:26px}
  .panel-preview{max-width:720px;width:100%;margin-inline:auto}
  .hero-info-cards{grid-template-columns:repeat(2,1fr);max-width:630px}
  .footer-reference-grid{grid-template-columns:repeat(2,1fr)}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:640px){
  .container{width:calc(100% - 28px)}
  .brand img{width:190px}
  .hero.hero-reference{min-height:560px;padding:54px 0 46px;background-position:center}
  .hero.hero-reference h1{font-size:2.75rem;letter-spacing:0}
  .hero-lead{font-size:.91rem!important}.hero-points{font-size:.78rem!important;gap:6px}
  .hero-actions-reference{width:100%}.hero-actions-reference .btn{width:100%}
  .hero-info-cards{grid-template-columns:1fr 1fr;gap:9px}
  .hero-info-card{padding:9px 10px;gap:8px}.hero-info-icon{width:25px;height:25px}.hero-info-card strong{font-size:.65rem}.hero-info-card small{font-size:.56rem}
  .about-reference{padding:44px 0}.about-reference-copy h2{font-size:1.8rem}
  .about-mini-features{grid-template-columns:repeat(2,1fr);gap:20px 0}.about-mini-features>div:nth-child(2){border-right:0}.about-mini-features>div:nth-child(3),.about-mini-features>div:nth-child(4){padding-top:2px}
  .panel-window-body{grid-template-columns:75px 1fr}.panel-stat-grid{grid-template-columns:repeat(2,1fr)}.panel-sidebar{padding:12px 7px}.panel-main{padding:12px 10px}.panel-preview{min-height:295px}
  .features-reference{padding:24px 0 48px}.reference-section-head h2{font-size:1.8rem}.reference-feature-grid{grid-template-columns:repeat(2,1fr);gap:10px}.reference-feature-card{padding:17px 14px;min-height:175px}
  .footer-reference-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-brand p{max-width:none}
  .footer-reference-bottom{font-size:.64rem}
}


/* 2026 readability, hero SEO copy and mobile swipe refinements */
.hero.hero-reference h1{
  max-width:1000px;
  font-size:clamp(2.65rem,5.25vw,4.7rem);
  line-height:1.03;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.hero-reference .hero-lead{
  max-width:850px!important;
  margin:0 auto 16px!important;
  line-height:1.7;
  text-wrap:balance;
}
.hero-keyword-tags{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  max-width:940px;
  margin:0 auto 22px;
}
.hero-keyword-tags span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 13px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  background:rgba(4,39,76,.34);
  color:#fff;
  font-size:.76rem;
  font-weight:700;
  line-height:1.2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

/* Make all text inside the dark installation notice clearly readable */
.install-side,
.install-side h3,
.install-side p{
  color:#fff!important;
}
.install-side h3{
  font-size:1.35rem;
  line-height:1.25;
  margin:0 0 16px;
}
.install-side p{
  opacity:.86;
  line-height:1.75;
}

/* Dark workflow cards: force white headings and bright supporting copy */
.process-shell,
.process-step,
.process-step h3{
  color:#fff!important;
}
.process-step h3{
  color:#fff!important;
}
.process-step p{
  color:#d5e4f2!important;
}
.process-step:before,
.process-step:not(:last-child):after{
  color:#55a4ff!important;
}

/* Keyboard focus for swipeable UI */
.process-line:focus-visible,
.faq-tabs:focus-visible{
  outline:3px solid rgba(31,124,255,.42);
  outline-offset:5px;
  border-radius:14px;
}

@media(max-width:640px){
  .hero.hero-reference{
    min-height:650px;
    padding-top:56px;
  }
  .hero.hero-reference h1{
    font-size:clamp(2.05rem,10.5vw,3rem);
    line-height:1.08;
    padding-inline:2px;
  }
  .hero-reference .hero-lead{
    font-size:.9rem!important;
    line-height:1.6;
    margin-bottom:14px!important;
  }
  .hero-keyword-tags{
    justify-content:flex-start;
    flex-wrap:nowrap;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 2px 9px;
    margin-bottom:16px;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    scrollbar-color:#55a4ff rgba(255,255,255,.13);
    -webkit-overflow-scrolling:touch;
  }
  .hero-keyword-tags::-webkit-scrollbar,
  .faq-tabs::-webkit-scrollbar,
  .process-line::-webkit-scrollbar{
    height:6px;
  }
  .hero-keyword-tags::-webkit-scrollbar-track,
  .faq-tabs::-webkit-scrollbar-track,
  .process-line::-webkit-scrollbar-track{
    background:rgba(20,72,120,.12);
    border-radius:999px;
  }
  .hero-keyword-tags::-webkit-scrollbar-thumb,
  .faq-tabs::-webkit-scrollbar-thumb,
  .process-line::-webkit-scrollbar-thumb{
    background:#2f88f4;
    border-radius:999px;
  }
  .hero-keyword-tags span{
    flex:0 0 auto;
    scroll-snap-align:start;
    font-size:.7rem;
  }

  /* FAQ categories remain in one row and swipe horizontally */
  .faq-tabs{
    display:flex!important;
    grid-template-columns:none!important;
    gap:10px;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 2px 10px;
    scroll-snap-type:x mandatory;
    scrollbar-width:thin;
    scrollbar-color:#2f88f4 #e5eef8;
    -webkit-overflow-scrolling:touch;
    position:static;
  }
  .faq-tab{
    flex:0 0 min(84vw,330px);
    min-width:min(84vw,330px);
    min-height:78px;
    scroll-snap-align:start;
    white-space:normal;
    text-align:left;
  }

  /* Workflow cards remain in one horizontal swipe row */
  .process-shell{
    padding:24px 0 20px;
    overflow:hidden;
  }
  .process-line{
    display:flex!important;
    grid-template-columns:none!important;
    gap:14px;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 20px 12px;
    scroll-padding-inline:20px;
    scroll-snap-type:x mandatory;
    scrollbar-width:thin;
    scrollbar-color:#55a4ff rgba(255,255,255,.12);
    -webkit-overflow-scrolling:touch;
  }
  .process-step{
    flex:0 0 min(84vw,320px);
    min-width:min(84vw,320px);
    min-height:215px;
    padding:28px 24px;
    scroll-snap-align:start;
  }
  .process-step:after{
    display:none!important;
  }
  .process-step h3{
    font-size:1.2rem;
  }
  .process-step p{
    font-size:.94rem;
    line-height:1.7;
  }
}

/* 2026 blue card and vertical mobile stack updates */
.compat-card,
.use-card,
.trouble-card{
  background:linear-gradient(145deg,#0b2a4a 0%, #071b31 100%)!important;
  border:1px solid rgba(106,177,255,.28)!important;
  box-shadow:0 16px 34px rgba(7,28,54,.14);
}
.compat-card h3,
.use-card h3,
.trouble-card h3{
  color:#ffffff!important;
}
.compat-card p,
.use-card p,
.trouble-card p{
  color:#d7e8f8!important;
}
.compat-card .status{
  background:rgba(74,149,255,.18)!important;
  color:#ffffff!important;
  border:1px solid rgba(129,191,255,.30);
}
.use-card{
  border-left:4px solid #4da2ff!important;
}

/* Optional: make step cards consistent with the blue/white request */
.install-step{
  background:linear-gradient(145deg,#0b2a4a 0%, #071b31 100%)!important;
  border:1px solid rgba(106,177,255,.24)!important;
}
.install-step h3{
  color:#ffffff!important;
}
.install-step p{
  color:#d7e8f8!important;
}
.step-number{
  color:#7eb8ff!important;
}

/* Mobile + tablet: stack these sections vertically instead of side scroll */
@media(max-width:980px){
  .compat-grid,
  .use-grid,
  .trouble-grid{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:640px){
  .faq-tabs{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px;
    overflow:visible!important;
    padding:0!important;
    scroll-snap-type:none!important;
  }
  .faq-tab{
    min-width:0!important;
    width:100%!important;
    flex:none!important;
    min-height:0!important;
  }
  .process-shell{
    padding:24px 0 20px;
    overflow:visible!important;
  }
  .process-line{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px;
    overflow:visible!important;
    padding:0!important;
    scroll-snap-type:none!important;
  }
  .process-step{
    min-width:0!important;
    width:100%!important;
    min-height:0!important;
    flex:none!important;
  }
  .compat-grid,
  .use-grid,
  .trouble-grid{
    grid-template-columns:1fr!important;
  }
}

/* 2026 center fix + forced Poppins */
html,body,button,input,select,textarea,
.nav-menu a,.btn,.faq-tab,.install-side,.install-step,.compat-card,.use-card,.trouble-card,h1,h2,h3,h4,h5,h6,p,span,small,strong,a,li{
  font-family:'Poppins',Arial,sans-serif!important;
}

@media(max-width:980px){
  .install-layout{
    grid-template-columns:1fr!important;
  }
  .install-side{
    position:static!important;
    max-width:520px;
    margin:0 auto 22px!important;
  }
  .faq-tabs{
    max-width:520px;
    margin-inline:auto;
  }
}

@media(max-width:640px){
  .install-side{
    max-width:420px;
    width:100%;
    margin:0 auto 20px!important;
    text-align:center!important;
    padding:30px 22px!important;
  }
  .install-side h3,
  .install-side p{
    text-align:center!important;
  }
  .install-side .btn,
  .install-side a.btn{
    margin-inline:auto!important;
  }
  .faq-tabs{
    max-width:420px;
    width:100%;
    margin:0 auto 18px!important;
  }
  .faq-tab{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    padding:18px 20px!important;
  }
}

/* Final correction: Before You Begin card must scroll normally with the page */
.install-layout{
  align-items:start!important;
}
.install-side{
  position:static!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  align-self:start!important;
  justify-self:center!important;
  width:100%!important;
  max-width:520px!important;
  margin:0 auto!important;
  overflow:visible!important;
}

@media(max-width:980px){
  .install-layout{
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
  }
  .install-side{
    width:min(100%,520px)!important;
    margin:0 auto 24px!important;
  }
}

@media(max-width:640px){
  .install-side{
    width:100%!important;
    max-width:420px!important;
    margin:0 auto 22px!important;
  }
}

/* Final FAQ category scroll behavior: normal vertical page flow on every screen */
.faq-tabs{
  position:static!important;
  top:auto!important;
  align-self:start!important;
  max-height:none!important;
  overflow:visible!important;
}

@media(max-width:980px){
  .faq-tabs{
    position:static!important;
    top:auto!important;
    max-width:520px;
    width:100%;
    margin-inline:auto;
  }
}

@media(max-width:640px){
  .faq-tabs{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    overflow:visible!important;
    padding:0!important;
    margin:0 auto 18px!important;
    scroll-snap-type:none!important;
  }
  .faq-tab{
    width:100%!important;
    min-width:0!important;
    flex:none!important;
    text-align:center!important;
    justify-content:center!important;
  }
}

/* Final auto-height content flow for FAQ category and installation cards */
.faq-tabs,
.faq-tab,
.install-side{
  position:static!important;
  top:auto!important;
  bottom:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}
.faq-tab{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:10px!important;
  padding:22px 24px!important;
  white-space:normal!important;
  line-height:1.45!important;
}
.faq-tab-title{
  display:block;
  color:inherit;
  font-size:1.02rem;
  font-weight:800;
  line-height:1.4;
}
.faq-tab-title strong{
  color:inherit;
  font-weight:800;
}
.faq-tab-copy{
  display:block;
  color:#64778c;
  font-size:.82rem;
  font-weight:500;
  line-height:1.7;
}
.faq-tab.active .faq-tab-copy{
  color:rgba(255,255,255,.88);
}
.install-side{
  display:block!important;
  padding:34px!important;
}
.install-side p{
  margin:0 0 18px!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}
.install-side .btn{
  margin-top:4px;
}

@media(max-width:640px){
  .faq-tab{
    align-items:flex-start!important;
    justify-content:flex-start!important;
    text-align:left!important;
    padding:22px!important;
  }
  .faq-tab-title,
  .faq-tab-copy{
    width:100%;
    text-align:left!important;
  }
  .install-side{
    text-align:left!important;
    padding:28px 24px!important;
  }
  .install-side h3,
  .install-side p{
    text-align:left!important;
  }
  .install-side .btn,
  .install-side a.btn{
    margin-left:0!important;
    margin-right:0!important;
  }
}

/* Final compact cards after removing descriptions */
.faq-tab{
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  min-height:108px!important;
  padding:22px 24px!important;
}
.faq-tab-title,
.faq-tab-title strong{
  width:100%;
  text-align:center!important;
}
.install-side{
  text-align:center!important;
  padding:34px 28px!important;
}
.install-side h3{
  text-align:center!important;
  margin:0 0 24px!important;
}
.install-side .btn,
.install-side a.btn{
  margin:0 auto!important;
}
@media(max-width:640px){
  .faq-tab{
    min-height:102px!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }
  .faq-tab-title,
  .faq-tab-title strong{
    text-align:center!important;
  }
  .install-side,
  .install-side h3{
    text-align:center!important;
  }
  .install-side .btn,
  .install-side a.btn{
    margin-inline:auto!important;
  }
}

/* Final normal-scroll safeguard: cards move with the page and are never fixed/sticky. */
.install-side,
.faq-tabs,
.faq-tab{
  position:static!important;
  inset:auto!important;
  transform:none;
}

/* Final FAQ category behavior: stay visible while the FAQ answers scroll. */
#faq.section{
  overflow:visible!important;
}
#faq .container,
#faq .faq-shell{
  overflow:visible!important;
}
#faq .faq-shell{
  align-items:start!important;
}
#faq .faq-tabs{
  position:-webkit-sticky!important;
  position:sticky!important;
  inset:calc(var(--header-h) + 16px) auto auto auto!important;
  top:calc(var(--header-h) + 16px)!important;
  align-self:start!important;
  z-index:20!important;
  max-height:calc(100vh - var(--header-h) - 32px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#2f88f4 #e5eef8;
}
#faq .faq-tabs::-webkit-scrollbar{
  width:6px;
}
#faq .faq-tabs::-webkit-scrollbar-track{
  background:#e5eef8;
  border-radius:999px;
}
#faq .faq-tabs::-webkit-scrollbar-thumb{
  background:#2f88f4;
  border-radius:999px;
}

@media(max-width:980px){
  #faq .faq-tabs{
    top:calc(var(--header-h) + 10px)!important;
    inset:calc(var(--header-h) + 10px) auto auto auto!important;
    max-height:calc(100vh - var(--header-h) - 22px)!important;
    padding:8px!important;
    border:1px solid #d8e6f5!important;
    border-radius:20px!important;
    background:#f3f8fe!important;
    box-shadow:0 12px 30px rgba(11,42,74,.12)!important;
  }
}

@media(max-width:640px){
  #faq .faq-tabs{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    max-width:420px!important;
    margin:0 auto 18px!important;
  }
  #faq .faq-tab{
    min-height:82px!important;
    padding:16px 18px!important;
  }
  #faq .faq-tab-title{
    font-size:.96rem!important;
    line-height:1.35!important;
  }
}

/* Final fix: Before You Begin card should sticky-scroll with the installation section */
#installation.section,
#installation .container,
#installation .install-layout{
  overflow:visible!important;
}
#installation .install-layout{
  align-items:start!important;
}
#installation .install-side{
  position:-webkit-sticky!important;
  position:sticky!important;
  top:calc(var(--header-h) + 16px)!important;
  inset:calc(var(--header-h) + 16px) auto auto auto!important;
  align-self:start!important;
  z-index:20!important;
}

@media(max-width:980px){
  #installation .install-side{
    top:calc(var(--header-h) + 10px)!important;
    inset:calc(var(--header-h) + 10px) auto auto auto!important;
  }
}

@media(max-width:640px){
  #installation .install-side{
    position:-webkit-sticky!important;
    position:sticky!important;
    top:calc(var(--header-h) + 10px)!important;
    inset:calc(var(--header-h) + 10px) auto auto auto!important;
    max-width:420px!important;
    margin:0 auto 20px!important;
  }
}