:root{
--forest:#0E3B2E;
--forest-2:#123F30;
--signature:#1F7A4D;
--signature-light:#2E9660;
--sage:#93A79A;
--sage-dim:#7C8F82;
--ivory:#F6F4EE;
--ivory-2:#EFECE2;
--ink:#16241D;
--ink-soft:#4A564D;
--rust:#B5502A;
--line:#DBD7C9;
--white:#FFFFFF;
/* lifecycle stage accents — deep, desaturated jewel tones */
--s1:#1E8A55; --s1-bg:#E4F3EA;
--s2:#2A6FB0; --s2-bg:#E6EFF9;
--s3:#C9871A; --s3-bg:#FBF1DE;
--s4:#7A55A8; --s4-bg:#F1EAFA;
--s5:#C25630; --s5-bg:#FBEBE3;
--s6:#46707A; --s6-bg:#E8F0F2;
--s7:#0E8A80; --s7-bg:#E1F2F0;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
font-family:'Inter', sans-serif;
color:var(--ink);
background:var(--ivory);
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:'Inter', sans-serif; font-weight:700; letter-spacing:-0.015em; line-height:1.2; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
.eyebrow{
font-size:12.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
color:var(--signature-light);
}
.eyebrow.on-light{ color:var(--signature); }
/* NAV */
nav.site{ background:var(--forest); padding:20px 0; }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{ width:34px; height:auto; display:block; }
.foot-mark{ width:36px; }
.foot-brand-text .brand-name{ color:var(--white); }
.foot-brand-text .brand-sub{ color:var(--sage); }
.portal-brand img.logo{ width:21px; height:auto; display:block; }
.brand-text{ color:var(--white); }
.brand-name{ font-family:'Inter', sans-serif; font-weight:800; font-size:19.5px; letter-spacing:-0.02em; line-height:1; }
.brand-sub{ font-size:8.5px; letter-spacing:0.12em; color:var(--sage); margin-top:3px; }
.nav-links{ display:flex; gap:30px; align-items:center; }
.nav-links a{ color:#D9DED9; font-size:14px; font-weight:500; }
.nav-links a:hover, .nav-links a.active{ color:var(--white); }
.nav-links a.active{ border-bottom:2px solid var(--signature-light); padding-bottom:4px; }
.nav-cta{ display:flex; gap:12px; align-items:center; margin-left:34px; padding-left:34px;
border-left:1px solid var(--line); }
.btn{
padding:10px 20px; border-radius:3px; font-size:13.5px; font-weight:600; display:inline-block;
border:1px solid transparent; cursor:pointer; text-align:center;
}
.btn-ghost{ color:var(--white); border-color:rgba(255,255,255,0.28); }
.btn-ghost:hover{ border-color:rgba(255,255,255,0.6); }
.btn-solid{ background:var(--signature); color:var(--white); }
.btn-solid:hover{ background:var(--signature-light); }
.btn-outline{ color:var(--signature); border-color:var(--signature); }
.btn-outline:hover{ background:var(--signature); color:var(--white); }
/* PAGE HEADER (subpages) */
.page-head{ background:var(--forest); padding:56px 0 60px; }
.page-head h1{ color:var(--white); font-size:39px; font-weight:800; letter-spacing:-0.03em; margin:14px 0 14px; line-height:1.1; }
.page-head p{ color:#C7D0C9; font-size:16px; line-height:1.65; max-width:560px; }
.crumb{ font-size:12.5px; color:var(--sage); margin-bottom:6px; }
.crumb a:hover{ color:var(--white); }
/* SECTIONS */
.section{ padding:90px 0; }
.section.tight{ padding:64px 0; }
.section.alt{ background:var(--white); }
.section-head{ max-width:600px; margin-bottom:52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:32px; font-weight:800; letter-spacing:-0.03em; margin:14px 0 16px; }
.section-head p{ color:var(--ink-soft); font-size:15.5px; line-height:1.6; }
/* CARDS */
.card{ background:var(--white); border:1px solid var(--line); border-radius:8px; padding:26px; }
.card h3{ font-size:18px; margin-bottom:9px; }
.card p{ font-size:14px; color:var(--ink-soft); line-height:1.6; }
/* STATS */
.stats{ background:linear-gradient(100deg, var(--forest) 0%, #14513C 55%, #12706B 100%); padding:34px 0; }
.stats-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.stat{ text-align:center; flex:1; min-width:120px; }
.stat svg{ width:20px; height:20px; stroke:var(--sage); fill:none; stroke-width:1.5;
stroke-linecap:round; stroke-linejoin:round; margin:0 auto 8px; display:block; opacity:.85; }
.stat-num{ font-family:'Inter', sans-serif; font-weight:800; font-size:25px; letter-spacing:-0.025em; color:var(--white); }
.stat-label{ font-size:11.5px; color:var(--sage); margin-top:4px; }
/* CTA BAND */
.band{ background:linear-gradient(100deg, var(--signature) 0%, #12706B 100%); padding:56px 0; text-align:center; }
.band h2{ color:var(--white); font-size:29px; font-weight:800; letter-spacing:-0.03em; margin-bottom:10px; }
.band p{ color:#E4F1E9; font-size:15px; margin-bottom:26px; }
.band .btn-solid{ background:var(--forest); padding:13px 26px; }
.band .btn-solid:hover{ background:var(--ink); }
/* FOOTER */
footer{ background:var(--forest); padding:50px 0 26px; }
.foot-cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:22px; }
.foot-cols h4{ color:var(--white); font-size:13px; margin-bottom:14px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; }
.foot-cols a{ display:block; color:var(--sage); font-size:13px; margin-bottom:9px; }
.foot-cols a:hover{ color:var(--white); }
.foot-desc{ color:var(--sage); font-size:13px; line-height:1.6; max-width:260px; margin-top:12px; }
.foot-bottom{ display:flex; justify-content:space-between; color:#6E8477; font-size:11.5px; }
@media (max-width: 980px){
.nav-links{ display:none; }
.foot-cols{ grid-template-columns:1fr 1fr; }
}
/* ==== index.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
.mega-stagelink{ display:block; border-radius:8px; margin:-6px -8px 0; padding:6px 8px; transition:background .14s; }
.mega-stagelink:hover{ background:var(--accent-bg); }
.mega-stagelink:hover .mega-name{ text-decoration:underline; }
.mega-all{ display:block !important; font-size:12px; font-weight:800; color:var(--accent) !important;
padding:8px 0 10px !important; margin-bottom:4px; border-bottom:1px solid var(--line); }
.mega-all:hover{ text-decoration:underline; }
.has-mega.suppress .mega{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
/* HERO — light */
.hero{ background:linear-gradient(180deg,#FCFBF8 0%, var(--ivory) 100%); padding:60px 0 74px; }
.hero-grid{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:68px; align-items:center; }
.hero h1{ color:var(--ink); font-size:46px; line-height:1.07; letter-spacing:-0.035em; font-weight:800; margin:16px 0 20px; }
.hero h1 em{ font-style:normal; color:var(--signature); }
.hero p{ color:var(--ink-soft); font-size:16.5px; line-height:1.65; max-width:450px; margin-bottom:28px; }
.hero-ctas{ display:flex; gap:12px; margin-bottom:8px; }
.hero-ctas .btn{ padding:13px 24px; font-size:14.5px; }
.hero-ctas .btn-ghost{ background:var(--white); }
.hero-fine{ display:flex; gap:20px; color:var(--ink-soft); font-size:12.5px; flex-wrap:wrap; margin-top:14px; }
.trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px;
padding-top:36px; border-top:1px solid var(--line); }
.trust-item{ color:var(--ink-soft); display:flex; gap:11px; align-items:flex-start; }
.trust-item .ti{ width:34px; height:34px; border-radius:9px; background:#E9F2EC; color:var(--signature);
display:flex; align-items:center; justify-content:center; flex:none; }
.trust-item svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.6;
stroke-linecap:round; stroke-linejoin:round; }
.trust-item b{ display:block; color:var(--ink); font-size:13px; font-weight:700; margin-bottom:2px; }
.trust-item span{ font-size:11.5px; line-height:1.4; display:block; }
/* ===== PORTAL MOCK — mirrors the live client portal ===== */
.portal{
background:var(--white); border:1px solid #E7E3D7; border-radius:12px; overflow:hidden;
box-shadow:0 28px 64px -30px rgba(22,36,29,0.42), 0 2px 6px rgba(22,36,29,0.05);
display:grid; grid-template-columns:176px 1fr; font-size:12px;
}
.portal-side{ background:var(--white); border-right:1px solid #EDEAE0; padding-bottom:18px; }
.portal-brand{ display:flex; align-items:center; gap:9px; padding:14px 15px;
border-bottom:1px solid #EDEAE0; margin-bottom:10px; }
.portal-brand span{ font-family:'Inter',sans-serif; font-weight:800;
font-size:15px; letter-spacing:-0.025em; }
.p-nav{ padding:0 9px; }
.p-nav a{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px;
color:#3F4A43; font-size:12.5px; font-weight:600; margin-bottom:2px; }
.p-nav a.on{ background:#E4F3E9; color:var(--signature); font-weight:700; }
.p-nav .em{ font-size:13px; width:16px; text-align:center; flex:none; line-height:1; }
.portal-main{ background:#FAFAF8; }
.portal-top{ display:flex; justify-content:space-between; align-items:center;
padding:10px 16px; border-bottom:1px solid #EDEAE0; background:var(--white); gap:12px; }
.p-co{ display:flex; align-items:center; gap:9px; border:1px solid #E2DED2; border-radius:8px;
padding:7px 12px; font-weight:700; font-size:12px; background:var(--white); }
.p-co .avatar{ width:19px; height:19px; border-radius:5px; background:var(--signature); color:#fff;
display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; }
.p-co .caret{ color:var(--sage-dim); font-size:8px; margin-left:14px; }
.p-topright{ display:flex; align-items:center; gap:11px; }
.p-iconbtn{ width:31px; height:29px; border:1px solid #E2DED2; border-radius:8px; display:flex;
align-items:center; justify-content:center; background:var(--white); font-size:13px; }
.p-admin{ background:var(--signature); color:#fff; border-radius:8px; padding:8px 13px;
font-size:11.5px; font-weight:700; display:flex; align-items:center; gap:7px; }
.p-admin svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.9;
stroke-linecap:round; stroke-linejoin:round; }
.p-user{ display:flex; align-items:center; gap:8px; }
.p-user .av{ width:28px; height:28px; border-radius:50%; background:#2C7BE5; color:#fff;
display:flex; align-items:center; justify-content:center; flex:none; }
.p-user .av svg{ width:16px; height:16px; fill:currentColor; }
.p-user b{ font-size:12px; display:block; line-height:1.25; font-weight:700; }
.p-user span{ font-size:10.5px; color:var(--ink-soft); }
.portal-body{ padding:16px 17px 18px; }
.p-title{ font-family:'Inter',sans-serif; font-weight:800; font-size:20px; letter-spacing:-0.035em; }
.p-subtitle{ font-size:11px; color:#9AA39C; margin:3px 0 14px; letter-spacing:0.02em; }
.p-banner{ background:linear-gradient(180deg,#E7F4EC 0%,#EDF7F1 100%); border:1px solid #CFE6D8;
border-radius:9px; padding:13px 15px; display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.p-banner .tick{ width:30px; height:30px; border-radius:8px; background:#39B36A; color:#fff;
display:flex; align-items:center; justify-content:center; flex:none;
box-shadow:0 2px 5px rgba(57,179,106,0.35); }
.p-banner .tick svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:3;
stroke-linecap:round; stroke-linejoin:round; }
.p-banner b{ font-size:13.5px; display:block; margin-bottom:2px; }
.p-banner span{ color:#586158; font-size:11.5px; }
.p-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-bottom:13px; }
.p-card{ border:1px solid #EAE6DA; border-radius:10px; padding:13px 13px 14px; background:var(--white);
box-shadow:0 1px 2px rgba(22,36,29,0.03); }
.p-card .ch{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:13px; }
.p-card .lbl{ font-size:8.5px; letter-spacing:0.07em; text-transform:uppercase; color:#5C6A60;
font-weight:700; line-height:1.4; }
.p-card .cico{ width:26px; height:26px; border-radius:7px; background:#F5F3EC; flex:none;
display:flex; align-items:center; justify-content:center; font-size:12px; }
.p-card .num{ font-family:'Inter',sans-serif; font-weight:800; font-size:24px;
letter-spacing:-0.04em; line-height:1; }
.p-card .sub{ font-size:10px; color:var(--ink-soft); margin-top:5px; }
.p-card .bar{ height:3px; border-radius:2px; background:#F0EDE3; margin-top:11px; overflow:hidden; }
.p-card .bar i{ display:block; height:100%; border-radius:2px; background:#E8A33D; }
.p-card.done .bar i{ background:#2E9660; }
.p-bottom{ display:grid; grid-template-columns:1.5fr 1fr; gap:11px; }
.p-panel{ border:1px solid #EAE6DA; border-radius:10px; padding:13px 14px; background:var(--white);
box-shadow:0 1px 2px rgba(22,36,29,0.03); }
.p-panel .ph{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.p-panel .ph b{ font-size:13px; display:flex; align-items:center; gap:8px; }
.p-panel .ph .em{ font-size:13px; }
.p-panel .ph a{ font-size:10.5px; color:var(--signature); font-weight:700; border:1px solid #B9D9C6;
border-radius:7px; padding:5px 11px; }
.p-task{ display:flex; justify-content:space-between; align-items:center; font-size:11.5px;
padding:7px 0; border-bottom:1px solid #F4F1E8; }
.p-task:last-child{ border-bottom:none; }
.p-task .dot{ width:5px; height:5px; border-radius:50%; background:#2E9660;
display:inline-block; margin-right:9px; }
.p-task .when{ color:var(--ink-soft); font-size:11px; }
.p-snap-div{ border-top:1px solid #EDEAE0; margin:2px 0 9px; }
.p-srow{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:7px 0; }
.p-srow dt{ font-size:11px; color:#5C6A60; }
.p-srow dd{ font-size:11.5px; font-weight:700; text-align:right; }
.portal-caption{ text-align:center; color:var(--sage-dim); font-size:11.5px; margin-top:14px; }
/* LIFECYCLE ROW */
.lifecycle-wrap{ max-width:1320px; margin:0 auto; padding:0 32px; }
.lc-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; align-items:stretch; }
.lc-cell{ display:flex; align-items:stretch; }
.lc-card{
--accent:var(--s1); --accent-bg:var(--s1-bg);
background:var(--white); border:1px solid var(--line); border-top:3px solid var(--accent);
border-radius:8px; padding:20px 16px 18px; flex:1; display:flex; flex-direction:column;
transition:box-shadow .18s ease, transform .18s ease;
}
.lc-card:hover{ box-shadow:0 18px 36px -22px rgba(22,36,29,0.45); transform:translateY(-3px); }
.lc-card.s1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.lc-card.s2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.lc-card.s3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.lc-card.s4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.lc-card.s5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.lc-card.s6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.lc-card.s7{ --accent:var(--s7); --accent-bg:var(--s7-bg); }
.lc-top{ display:flex; align-items:center; justify-content:space-between; gap:9px; margin-bottom:13px; }
.lc-ico{
width:34px; height:34px; border-radius:9px; background:var(--accent-bg);
display:flex; align-items:center; justify-content:center; color:var(--accent); flex:none;
}
.lc-ico svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6;
stroke-linecap:round; stroke-linejoin:round; }
.lc-num{
font-family:'Inter', sans-serif; font-weight:800; font-size:11.5px; letter-spacing:-0.01em;
color:var(--accent); background:var(--accent-bg); border-radius:5px; padding:4px 8px; line-height:1;
}
.lc-name{
font-size:12px; font-weight:800; letter-spacing:0.09em; text-transform:uppercase;
color:var(--accent); margin-bottom:5px;
}
.lc-tag{ font-size:11.5px; color:var(--ink-soft); margin-bottom:14px; line-height:1.4; }
.lc-list{ list-style:none; flex:1; margin-bottom:16px; }
.lc-list li{
font-size:12px; color:var(--ink); padding:4px 0 4px 14px; position:relative; line-height:1.35;
}
.lc-list li:before{
content:''; position:absolute; left:0; top:9.5px; width:5px; height:5px; border-radius:50%;
background:var(--accent); opacity:.7;
}
.lc-more{ font-size:11.5px; font-weight:700; color:var(--accent); }
.lc-card:hover .lc-more{ text-decoration:underline; }
.plat{ background:linear-gradient(180deg,#FCFBF8 0%,var(--ivory) 100%); padding:88px 0;
border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.plat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.plat-card{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.plat-card:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px);
border-color:var(--pc); }
.plat-card .pi{ width:46px; height:46px; border-radius:13px; background:var(--pcbg);
color:var(--pc); display:block; box-sizing:border-box; padding:12px; margin-bottom:17px; }
.plat-card .pi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.plat-card b{ color:var(--ink); font-size:16.5px; display:block; margin-bottom:7px; letter-spacing:-.015em; }
.plat-card span{ color:var(--ink-soft); font-size:13.5px; line-height:1.6; }
.p1{ --pc:var(--s1); --pcbg:var(--s1-bg); }
.p2{ --pc:var(--s2); --pcbg:var(--s2-bg); }
.p3{ --pc:var(--s3); --pcbg:var(--s3-bg); }
.p4{ --pc:var(--s4); --pcbg:var(--s4-bg); }
.p5{ --pc:var(--s7); --pcbg:var(--s7-bg); }
.p6{ --pc:var(--s5); --pcbg:var(--s5-bg); }
.plat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:16px; }
.plat-strip div{ background:var(--white); border:1px solid var(--line); border-radius:12px;
padding:20px 22px; }
.plat-strip b{ display:block; font-family:'Inter',sans-serif; font-weight:800;
font-size:20px; letter-spacing:-.03em; margin-bottom:3px; }
.plat-strip span{ font-size:12px; color:var(--ink-soft); }
.ps1 b{ color:var(--s1); } .ps2 b{ color:var(--s2); } .ps3 b{ color:var(--s7); } .ps4 b{ color:var(--s4); }
@media (max-width:980px){ .plat-grid,.plat-strip{ grid-template-columns:1fr 1fr; } }
.needgrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.needcard{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:22px 18px;
display:flex; flex-direction:column; transition:box-shadow .18s, transform .18s, border-color .18s; }
.needcard:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--nc); }
.needcard .ni{ width:42px; height:42px; border-radius:12px; box-sizing:border-box; padding:11px; color:#fff;
display:block; margin-bottom:14px; background:linear-gradient(140deg,var(--nc),var(--nc2)); box-shadow:0 6px 14px -6px var(--nc); }
.needcard .ni svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.needcard b{ font-size:14.5px; margin-bottom:6px; letter-spacing:-.01em; }
.needcard span{ font-size:12px; color:var(--ink-soft); line-height:1.5; flex:1; margin-bottom:12px; }
.needcard em{ font-style:normal; font-size:12px; font-weight:800; color:var(--nc); }
@media (max-width:1240px){ .needgrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:980px){ .needgrid{ grid-template-columns:1fr 1fr; } }
.pkggrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pkgcard{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:28px;
position:relative; display:flex; flex-direction:column; }
.pkgcard.pop{ border:2px solid var(--s1); box-shadow:0 20px 42px -26px rgba(30,138,85,.4); }
.pkgcard .poptag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--s1); color:#fff;
font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; border-radius:20px; padding:5px 14px; }
.pkgcard h3{ font-size:18px; margin-bottom:6px; }
.pkgcard .pkgprice{ font-family:'Inter',sans-serif; font-weight:800; font-size:30px; letter-spacing:-.03em; margin:8px 0 4px; }
.pkgcard .pkgprice small{ font-size:12px; font-weight:600; color:var(--ink-soft); }
.pkgcard ul{ list-style:none; margin:16px 0 20px; flex:1; }
.pkgcard li{ font-size:12.5px; padding:5px 0 5px 20px; position:relative; color:var(--ink-soft); }
.pkgcard li:before{ content:'\2713'; position:absolute; left:0; color:var(--s1); font-weight:800; }
.s343steps{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin:20px 0 24px; }
.s343steps div{ font-size:13px; color:var(--ink); display:flex; align-items:center; gap:9px; }
.s343steps b{ width:24px; height:24px; border-radius:7px; background:#FBEBE3; color:#C25630; font-size:11px;
display:flex; align-items:center; justify-content:center; flex:none; font-family:'Inter',sans-serif; font-weight:800; }
.howgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.howcard{ text-align:center; }
.howcard .hn{ width:48px; height:48px; border-radius:50%; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
font-family:'Inter',sans-serif; font-weight:800; font-size:17px; }
.howcard b{ font-size:14.5px; display:block; margin-bottom:7px; }
.howcard p{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; }
.acctstrip{ display:flex; align-items:center; justify-content:space-between; gap:24px;
background:var(--forest); border-radius:18px; padding:34px 40px; flex-wrap:wrap; }
.acctstrip h3{ color:#fff; font-size:21px; margin-bottom:6px; }
.acctstrip p{ color:#C7D0C9; font-size:13.5px; max-width:460px; }
/* WHY GRID */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px; }
.why-ico{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.why-ico svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.why-item:nth-child(1) .why-ico{ background:var(--s1-bg); color:var(--s1); }
.why-item:nth-child(2) .why-ico{ background:var(--s2-bg); color:var(--s2); }
.why-item:nth-child(3) .why-ico{ background:var(--s5-bg); color:var(--s5); }
.why-item .num{ font-family:'Inter', sans-serif; font-size:13px; font-weight:800; margin-bottom:10px; }
.why-item:nth-child(1) .num{ color:var(--s1); }
.why-item:nth-child(2) .num{ color:var(--s2); }
.why-item:nth-child(3) .num{ color:var(--s5); }
.why-item h3{ font-size:18px; margin-bottom:9px; }
.why-item p{ font-size:14px; color:var(--ink-soft); line-height:1.6; }
/* RECOVERY STRIP */
.recover{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.recover h2{ font-size:29px; margin:14px 0 16px; }
.recover p{ color:var(--ink-soft); font-size:15px; line-height:1.65; margin-bottom:22px; }
.fixflow{ display:flex; align-items:center; gap:16px; }
.fixcard{ background:var(--white); border:1px solid var(--line); border-radius:8px; padding:18px 20px; flex:1; }
.fixcard .t{ font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:12px;
display:flex; align-items:center; gap:7px; }
.fixcard .t svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.fixcard.risk .t{ color:var(--rust); }
.fixcard.fixed .t{ color:var(--signature); }
.fixcard li{ list-style:none; font-size:13px; padding:4px 0; color:var(--ink); }
.fixcard.risk li:before{ content:'△ '; color:var(--rust); }
.fixcard.fixed li:before{ content:'✓ '; color:var(--signature); }
.arrow{ font-size:20px; color:var(--sage); }
@media (max-width: 1240px){
.lc-grid{ grid-template-columns:repeat(3,1fr); gap:14px; }
}
@media (max-width: 980px){
.hero-grid{ grid-template-columns:1fr; }
.trust{ grid-template-columns:1fr 1fr; }
.lc-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
.why-grid{ grid-template-columns:1fr; }
.recover{ grid-template-columns:1fr; }
.p-cards{ grid-template-columns:1fr 1fr; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.head2{ display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:start; margin-bottom:44px; }
.head2 .eyebrow{ display:block; margin-bottom:14px; }
.head2 h2{ font-size:30px; font-weight:800; letter-spacing:-.03em; margin:0; line-height:1.25; }
.head2 p{ color:var(--ink-soft); font-size:15.5px; line-height:1.7; margin:0; padding-top:30px; }
@media (max-width:980px){ .head2{ grid-template-columns:1fr; gap:16px; align-items:start; } .head2 p{ padding-top:0; } }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
/* ==== platform.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:sticky; top:24px; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.lead{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:660px; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cols2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.pcard:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--pc); }
.pcard .pi{ width:46px; height:46px; border-radius:13px; background:var(--pcbg); color:var(--pc);
display:block; box-sizing:border-box; padding:12px; margin-bottom:16px; }
.pcard .pi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pcard h3{ font-size:17px; margin-bottom:8px; }
.pcard p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.pcard .tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--pcbg); color:var(--pc); border-radius:5px;
padding:4px 8px; margin-bottom:12px; }
.g1{ --pc:var(--s1); --pcbg:var(--s1-bg); } .g2{ --pc:var(--s2); --pcbg:var(--s2-bg); }
.g3{ --pc:var(--s3); --pcbg:var(--s3-bg); } .g4{ --pc:var(--s4); --pcbg:var(--s4-bg); }
.g5{ --pc:var(--s5); --pcbg:var(--s5-bg); } .g6{ --pc:var(--s7); --pcbg:var(--s7-bg); }
.promise{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px 30px; }
.promise li{ list-style:none; font-size:14.5px; padding:9px 0 9px 28px; position:relative;
border-bottom:1px solid var(--line); }
.promise li:last-child{ border-bottom:none; }
.promise li:before{ content:'✓'; position:absolute; left:0; top:9px; color:var(--s1); font-weight:800; }
.kv{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.kv .ki{ width:38px; height:38px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:block; box-sizing:border-box; padding:10px; flex:none; }
.kv .ki svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kv b{ display:block; font-size:14px; margin-bottom:2px; }
.kv span{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.kv a{ color:var(--s1); font-weight:600; }
.form{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px; }
.form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.form input,.form textarea,.form select{ width:100%; border:1px solid var(--line); border-radius:8px;
padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; margin-bottom:16px;
background:var(--ivory); color:var(--ink); box-sizing:border-box; }
.form textarea{ min-height:110px; resize:vertical; }
.form .btn{ width:100%; text-align:center; padding:13px 0; }
.postlist a{ display:block; background:var(--white); border:1px solid var(--line); border-radius:12px;
padding:22px 24px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.postlist a:hover{ border-color:var(--s1); box-shadow:0 14px 30px -22px rgba(22,36,29,.4); }
.postlist .meta{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--pc,var(--s1)); margin-bottom:7px; display:block; }
.postlist b{ font-size:17px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.postlist span.ex{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.timeline2{ border-left:2px solid var(--line); padding-left:26px; margin-left:8px; }
.tl2{ position:relative; padding-bottom:26px; }
.tl2:last-child{ padding-bottom:0; }
.tl2:before{ content:''; position:absolute; left:-33px; top:4px; width:12px; height:12px;
border-radius:50%; background:var(--s1); border:3px solid var(--ivory); }
.tl2 b{ display:block; font-size:15px; margin-bottom:4px; }
.tl2 span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.note{ background:#FBF1DE; border:1px solid #EBDCB6; border-radius:10px; padding:14px 18px;
font-size:13px; color:#6B551F; }
@media (max-width:980px){ .cols3,.cols2,.cols4{ grid-template-columns:1fr; } }
.platshot{ border-radius:14px; overflow:hidden; box-shadow:0 30px 70px -30px rgba(22,36,29,.5); border:1px solid var(--line); }
.platshot img{ display:block; width:100%; height:auto; }
.platfeat{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-bottom:80px; }
.platfeat.rev .platshot{ order:2; }
.platfeat .txt .eyebrow{ margin-bottom:14px; }
.platfeat h2{ font-size:28px; margin-bottom:14px; letter-spacing:-.02em; }
.platfeat p{ font-size:15px; color:var(--ink-soft); line-height:1.75; margin-bottom:18px; }
.platlist{ list-style:none; }
.platlist li{ font-size:14px; color:var(--ink); padding:7px 0 7px 26px; position:relative; }
.platlist li:before{ content:'\2713'; position:absolute; left:0; color:var(--s1); font-weight:800; }
.platgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:50px 0; }
.platmini{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:20px; }
.platmini .pi{ width:38px; height:38px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.platmini .pi svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.platmini b{ font-size:13.5px; display:block; margin-bottom:5px; }
.platmini span{ font-size:12px; color:var(--ink-soft); line-height:1.5; }
@media (max-width:980px){ .platfeat{ grid-template-columns:1fr; } .platfeat.rev .platshot{ order:0; } .platgrid{ grid-template-columns:1fr 1fr; } }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.head2{ display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:start; margin-bottom:44px; }
.head2 .eyebrow{ display:block; margin-bottom:14px; }
.head2 h2{ font-size:30px; font-weight:800; letter-spacing:-.03em; margin:0; line-height:1.25; }
.head2 p{ color:var(--ink-soft); font-size:15.5px; line-height:1.7; margin:0; padding-top:30px; }
@media (max-width:980px){ .head2{ grid-template-columns:1fr; gap:16px; align-items:start; } .head2 p{ padding-top:0; } }
/* ==== services.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
.mega-stagelink{ display:block; border-radius:8px; margin:-6px -8px 0; padding:6px 8px; transition:background .14s; }
.mega-stagelink:hover{ background:var(--accent-bg); }
.mega-stagelink:hover .mega-name{ text-decoration:underline; }
.mega-all{ display:block !important; font-size:12px; font-weight:800; color:var(--accent) !important;
padding:8px 0 10px !important; margin-bottom:4px; border-bottom:1px solid var(--line); }
.mega-all:hover{ text-decoration:underline; }
.has-mega.suppress .mega{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.stage{ padding:64px 0; border-bottom:1px solid var(--line); }
.stage:nth-child(even){ background:var(--white); }
.stage-grid{ display:grid; grid-template-columns:300px 1fr; gap:56px; align-items:start; }
.stage-label{ position:static; }
.stage{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
#start{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
#operate{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
#compliant{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
#grow{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
#recover{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
#exit{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
#archive{ --accent:var(--s7); --accent-bg:var(--s7-bg); }
.stage-ico{ width:52px; height:52px; border-radius:14px; background:var(--accent-bg); color:var(--accent);
display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.stage-ico svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.stage-num{
display:inline-flex; font-size:11.5px; font-weight:800; letter-spacing:0.08em;
color:var(--accent); background:var(--accent-bg); border-radius:5px; padding:4px 8px; margin-bottom:10px;
width:auto; height:auto; border-radius:5px; background:var(--accent-bg);
display:flex; align-items:center; justify-content:center;
font-family:'Inter', sans-serif; font-weight:800; font-size:17px; color:var(--accent); margin-bottom:16px;
}
.stage h2{ color:var(--accent); }
.stage h2{ font-size:26px; margin-bottom:8px; }
.stage-sub{ color:var(--ink-soft); font-size:14.5px; line-height:1.6; }
.svc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.svc-col{ display:flex; flex-direction:column; gap:26px; }
.svc-group h4{ font-size:11.5px; font-weight:800; letter-spacing:0.11em; text-transform:uppercase;
color:var(--accent); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.stage-count{ margin-top:14px; font-size:11.5px; font-weight:700; color:var(--accent);
background:var(--accent-bg); border-radius:5px; padding:5px 10px; display:inline-block; }
.svc{
background:var(--white); border:1px solid var(--line); border-radius:7px; padding:18px 20px;
display:flex; justify-content:space-between; align-items:center; gap:14px;
transition:border-color .15s ease;
}
.stage:nth-child(even) .svc{ background:var(--ivory); }
.svc:hover{ border-color:var(--accent); box-shadow:0 12px 26px -20px rgba(22,36,29,0.4); }
.svc b{ font-size:14.5px; display:block; }
.svc span{ font-size:12px; color:var(--ink-soft); display:block; margin-top:3px; }
.svc .go{ color:var(--accent); font-weight:700; font-size:15px; flex:none; }
@media (max-width: 980px){
.stage-grid{ grid-template-columns:1fr; }
.svc-grid{ grid-template-columns:1fr; }
.stage-label{ position:static; }
}
/* ==== shared visual system ==== */
.t-green{ background:var(--s1-bg); color:var(--s1); }
.t-blue{ background:var(--s2-bg); color:var(--s2); }
.t-amber{ background:var(--s3-bg); color:var(--s3); }
.t-violet{ background:var(--s4-bg); color:var(--s4); }
.t-rust{ background:var(--s5-bg); color:var(--s5); }
.t-teal{ background:var(--s7-bg,#E6F1F0); color:var(--s7,#12706B); }
/* horizontal timeline */
.tl{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:34px; }
.tl:before{ content:''; position:absolute; top:26px; left:11%; right:11%; height:2px;
background:linear-gradient(90deg,var(--s1) 0%,var(--s2) 45%,var(--s4) 100%); opacity:.35; }
.tlstep{ text-align:center; padding:0 12px; position:relative; }
.tlstep .dot{ width:52px; height:52px; border-radius:50%; background:var(--white);
border:2px solid var(--accent,#1F7A4D); color:var(--accent,#1F7A4D);
display:flex; align-items:center; justify-content:center; margin:0 auto 14px; position:relative; z-index:2; }
.tlstep .dot svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.6;
stroke-linecap:round; stroke-linejoin:round; }
.tlstep .day{ font-size:10px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
color:var(--accent,#1F7A4D); margin-bottom:5px; }
.tlstep b{ font-size:14px; display:block; margin-bottom:5px; }
.tlstep span{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; display:block; }
/* bar chart */
.chart{ background:var(--white); border:1px solid var(--line); border-radius:10px; padding:24px 26px; }
.bar-row{ margin-bottom:18px; }
.bar-row:last-child{ margin-bottom:0; }
.bar-lab{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; }
.bar-lab b{ font-size:13.5px; }
.bar-lab .v{ font-family:'Inter',sans-serif; font-weight:800; font-size:14px; letter-spacing:-0.02em; }
.bar-track{ height:12px; background:var(--ivory-2); border-radius:7px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:7px; }
.bar-note{ font-size:11.5px; color:var(--ink-soft); margin-top:5px; }
.svc{ align-items:center; }
.svc .stxt{ flex:1; }
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.stagefilter{ background:var(--white); border:1px solid var(--line); border-radius:10px;
padding:15px 18px; margin:0 auto 8px; max-width:1180px; }
.stagefilter .flab{ display:block; font-size:11px; font-weight:800; letter-spacing:.1em;
text-transform:uppercase; color:var(--ink-soft); margin-bottom:11px; }
.stagefilter .chips{ display:flex; flex-wrap:wrap; gap:8px; }
.stagefilter a{ font-size:12.5px; font-weight:700; border:1px solid var(--line);
border-radius:20px; padding:8px 15px; background:var(--ivory); }
.stagefilter a em{ font-style:normal; font-weight:600; opacity:.6; margin-left:5px; font-size:11px; }
.sf1{ color:var(--s1); } .sf1:hover{ background:var(--s1-bg); border-color:var(--s1); }
.sf2{ color:var(--s2); } .sf2:hover{ background:var(--s2-bg); border-color:var(--s2); }
.sf3{ color:var(--s3); } .sf3:hover{ background:var(--s3-bg); border-color:var(--s3); }
.sf4{ color:var(--s4); } .sf4:hover{ background:var(--s4-bg); border-color:var(--s4); }
.sf5{ color:var(--s5); } .sf5:hover{ background:var(--s5-bg); border-color:var(--s5); }
.sf6{ color:var(--s6); } .sf6:hover{ background:var(--s6-bg); border-color:var(--s6); }
.head2{ display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:start; margin-bottom:44px; }
.head2 .eyebrow{ display:block; margin-bottom:14px; }
.head2 h2{ font-size:30px; font-weight:800; letter-spacing:-.03em; margin:0; line-height:1.25; }
.head2 p{ color:var(--ink-soft); font-size:15.5px; line-height:1.7; margin:0; padding-top:30px; }
@media (max-width:980px){ .head2{ grid-template-columns:1fr; gap:16px; align-items:start; } .head2 p{ padding-top:0; } }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
/* ==== start.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
.mega-stagelink{ display:block; border-radius:8px; margin:-6px -8px 0; padding:6px 8px; transition:background .14s; }
.mega-stagelink:hover{ background:var(--accent-bg); }
.mega-stagelink:hover .mega-name{ text-decoration:underline; }
.mega-all{ display:block !important; font-size:12px; font-weight:800; color:var(--accent) !important;
padding:8px 0 10px !important; margin-bottom:4px; border-bottom:1px solid var(--line); }
.mega-all:hover{ text-decoration:underline; }
.has-mega.suppress .mega{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:static; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.lead{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:660px; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cols2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.pcard:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--pc); }
.pcard .pi{ width:46px; height:46px; border-radius:13px; background:var(--pcbg); color:var(--pc);
display:block; box-sizing:border-box; padding:12px; margin-bottom:16px; }
.pcard .pi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pcard h3{ font-size:17px; margin-bottom:8px; }
.pcard p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.pcard .tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--pcbg); color:var(--pc); border-radius:5px;
padding:4px 8px; margin-bottom:12px; }
.g1{ --pc:var(--s1); --pcbg:var(--s1-bg); } .g2{ --pc:var(--s2); --pcbg:var(--s2-bg); }
.g3{ --pc:var(--s3); --pcbg:var(--s3-bg); } .g4{ --pc:var(--s4); --pcbg:var(--s4-bg); }
.g5{ --pc:var(--s5); --pcbg:var(--s5-bg); } .g6{ --pc:var(--s7); --pcbg:var(--s7-bg); }
.promise{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px 30px; }
.promise li{ list-style:none; font-size:14.5px; padding:9px 0 9px 28px; position:relative;
border-bottom:1px solid var(--line); }
.promise li:last-child{ border-bottom:none; }
.promise li:before{ content:'✓'; position:absolute; left:0; top:9px; color:var(--s1); font-weight:800; }
.kv{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.kv .ki{ width:38px; height:38px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:block; box-sizing:border-box; padding:10px; flex:none; }
.kv .ki svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kv b{ display:block; font-size:14px; margin-bottom:2px; }
.kv span{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.kv a{ color:var(--s1); font-weight:600; }
.form{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px; }
.form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.form input,.form textarea,.form select{ width:100%; border:1px solid var(--line); border-radius:8px;
padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; margin-bottom:16px;
background:var(--ivory); color:var(--ink); box-sizing:border-box; }
.form textarea{ min-height:110px; resize:vertical; }
.form .btn{ width:100%; text-align:center; padding:13px 0; }
.postlist a{ display:block; background:var(--white); border:1px solid var(--line); border-radius:12px;
padding:22px 24px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.postlist a:hover{ border-color:var(--s1); box-shadow:0 14px 30px -22px rgba(22,36,29,.4); }
.postlist .meta{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--pc,var(--s1)); margin-bottom:7px; display:block; }
.postlist b{ font-size:17px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.postlist span.ex{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.timeline2{ border-left:2px solid var(--line); padding-left:26px; margin-left:8px; }
.tl2{ position:relative; padding-bottom:26px; }
.tl2:last-child{ padding-bottom:0; }
.tl2:before{ content:''; position:absolute; left:-33px; top:4px; width:12px; height:12px;
border-radius:50%; background:var(--s1); border:3px solid var(--ivory); }
.tl2 b{ display:block; font-size:15px; margin-bottom:4px; }
.tl2 span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.note{ background:#FBF1DE; border:1px solid #EBDCB6; border-radius:10px; padding:14px 18px;
font-size:13px; color:#6B551F; }
@media (max-width:980px){ .cols3,.cols2,.cols4{ grid-template-columns:1fr; } }
.stage-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }
.stage-chips span{ background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2);
border-radius:20px; padding:7px 15px; font-size:12.5px; font-weight:600; color:#D5DED8; }
.stage-chips span b{ color:#fff; font-weight:800; }
/* featured services */
.feat{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:8px; }
.fcard{ position:relative; background:var(--white); border:1px solid var(--line); border-radius:14px;
padding:26px; display:flex; flex-direction:column; overflow:hidden;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.fcard:before{ content:''; position:absolute; inset:0 0 auto 0; height:4px;
background:linear-gradient(90deg,var(--ac),var(--ac2)); }
.fcard:hover{ box-shadow:0 22px 46px -26px rgba(22,36,29,.45); transform:translateY(-4px); border-color:var(--ac); }
.fcard.pop{ border-color:var(--ac); box-shadow:0 16px 34px -24px rgba(22,36,29,.35); }
.fbadge{ position:absolute; top:16px; right:16px; font-size:9.5px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--ac); color:#fff; border-radius:5px; padding:4px 8px; }
.fcard .fi{ width:46px; height:46px; border-radius:13px; box-sizing:border-box; padding:12px; color:#fff;
display:block; margin:6px 0 16px; background:linear-gradient(140deg,var(--ac),var(--ac2));
box-shadow:0 7px 16px -7px var(--ac); }
.fcard .fi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fcard b{ font-size:18px; display:block; margin-bottom:9px; letter-spacing:-.02em;
min-height:52px; line-height:1.25; }
.fcard .fd{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; flex:1; margin-bottom:18px; }
.fcard .fp{ padding-top:16px; border-top:1px solid var(--line); display:block; }
.fcard .fp .pr{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:24px;
letter-spacing:-.03em; color:var(--ink); display:block; line-height:1; }
.fcard .fp .pr .from{ font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
color:var(--ink-soft); letter-spacing:0; margin-right:3px; }
.fcard .fp .psub{ font-size:11.5px; font-weight:600; color:var(--ink-soft); display:block; margin-top:5px; }
.fcard .fgo{ margin-top:15px; display:flex; align-items:center; justify-content:center; gap:7px;
background:var(--acbg); color:var(--ac); border-radius:9px; padding:11px 0;
font-size:13px; font-weight:800; transition:background .15s, color .15s; }
.fcard:hover .fgo{ background:linear-gradient(140deg,var(--ac),var(--ac2)); color:#fff; }
.fcard.pop .fgo{ background:linear-gradient(140deg,var(--ac),var(--ac2)); color:#fff; }
.featlab{ font-size:11.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
color:var(--ac); margin-bottom:14px; }
/* colourful key facts */
.factgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fact{ background:var(--white); border:1px solid var(--line); border-radius:13px; padding:20px 22px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.fact:hover{ box-shadow:0 16px 34px -24px rgba(22,36,29,.4); transform:translateY(-2px); border-color:var(--fc); }
.fact .fh{ display:flex; align-items:center; gap:12px; margin-bottom:11px; }
.fact .fico{ width:38px; height:38px; border-radius:11px; box-sizing:border-box; padding:10px; color:#fff;
display:block; flex:none; background:linear-gradient(140deg,var(--fc),var(--fc2));
box-shadow:0 6px 13px -6px var(--fc); }
.fact .fico svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; }
.fact .fnum{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:11px;
color:var(--fc); background:var(--fcbg); border-radius:5px; padding:3px 7px; margin-left:auto; }
.fact b{ font-size:15px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.fact span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.f1{ --fc:#1E8A55; --fc2:#2FB273; --fcbg:#E4F3EA; } .f2{ --fc:#2A6FB0; --fc2:#4B95D6; --fcbg:#E6EFF9; }
.f3{ --fc:#C9871A; --fc2:#E5A83E; --fcbg:#FBF1DE; } .f4{ --fc:#7A55A8; --fc2:#9C78C9; --fcbg:#F1EAFA; }
.f5{ --fc:#C25630; --fc2:#DE7A52; --fcbg:#FBEBE3; } .f6{ --fc:#0E8A80; --fc2:#22ADA2; --fcbg:#E1F2F0; }
.faqgrid{ display:grid; grid-template-columns:1fr 1fr; gap:0 44px; border-top:1px solid var(--line); }
.faqgrid details{ border-bottom:1px solid var(--line); padding:15px 0; }
.faqgrid summary{ font-size:14.5px; font-weight:700; cursor:pointer; list-style:none;
display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.faqgrid summary::-webkit-details-marker{ display:none; }
.faqgrid summary:after{ content:'+'; color:var(--ac); font-weight:800; font-size:17px; line-height:1; flex:none; }
.faqgrid details[open] summary:after{ content:'3'; }
.faqgrid details p{ margin-top:10px; font-size:13.5px; color:var(--ink-soft); line-height:1.65; }
/* prominent next-stage band */
.stagenav{ display:flex; flex-direction:column; gap:14px; }
.nextband{ position:relative; overflow:hidden; border-radius:14px; padding:24px 28px; color:#fff;
background:linear-gradient(115deg,var(--nc) 0%,var(--nc2) 100%);
display:flex; align-items:center; gap:22px;
box-shadow:0 18px 40px -26px var(--nc); transition:transform .18s, box-shadow .18s; }
.nextband:before{ content:''; position:absolute; right:-40px; top:-56px; width:190px; height:190px;
border-radius:50%; background:rgba(255,255,255,.10); }
.nextband:after{ content:''; position:absolute; right:56px; bottom:-80px; width:140px; height:140px;
border-radius:50%; background:rgba(255,255,255,.07); }
.nextband:hover{ transform:translateY(-2px); box-shadow:0 24px 48px -26px var(--nc); }
.nextband .nbtxt{ position:relative; z-index:1; flex:1; }
.nextband .t{ font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
opacity:.85; margin-bottom:6px; display:block; }
.nextband b{ font-size:23px; display:block; margin-bottom:4px; letter-spacing:-.03em; line-height:1.1;
font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; }
.nextband span.d{ font-size:13.5px; opacity:.92; line-height:1.5; display:block; max-width:420px; }
.nextband .cta{ position:relative; z-index:1; flex:none; display:flex; align-items:center; gap:9px;
background:#fff; color:var(--nc); border-radius:26px; padding:11px 20px;
font-size:13.5px; font-weight:800; letter-spacing:-.01em; box-shadow:0 7px 16px -8px rgba(0,0,0,.3); }
.nextband .cta svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.6;
stroke-linecap:round; stroke-linejoin:round; transition:transform .18s; }
.nextband:hover .cta svg{ transform:translateX(3px); }
.prevlink{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700;
color:var(--ink-soft); align-self:flex-start; }
.prevlink:hover{ color:var(--ink); }
.prevlink svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.4;
stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:980px){ .faqgrid{ grid-template-columns:1fr; }
.nextband{ flex-direction:column; align-items:flex-start; padding:30px; } }
@media (max-width:980px){ .feat,.factgrid,.stagenav{ grid-template-columns:1fr; } }
.stagehero{ display:grid; grid-template-columns:1fr 300px; gap:44px; align-items:start; }
.catgrid2{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cat2{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:22px;
display:flex; flex-direction:column; transition:box-shadow .18s, transform .18s, border-color .18s; }
.cat2:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.42); transform:translateY(-3px); border-color:var(--cac,var(--ac)); }
.cat2 .ci2{ width:42px; height:42px; border-radius:12px; box-sizing:border-box; padding:11px; color:#fff;
display:block; margin-bottom:14px; background:linear-gradient(140deg,var(--cac,var(--ac)),var(--cac2,var(--ac2)));
box-shadow:0 6px 14px -6px var(--cac,var(--ac)); }
.cat2 .ci2 svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cat2 b{ font-size:15.5px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.cat2 span.d{ font-size:13px; color:var(--ink-soft); line-height:1.55; flex:1; }
.cat2 .n{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
font-size:12px; font-weight:700; color:var(--ac); }
.grouphead{ font-size:11.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
color:var(--ac); margin:34px 0 14px; padding-bottom:9px; border-bottom:1px solid var(--line); }
.grouphead:first-of-type{ margin-top:0; }
.keyfacts{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px 28px; }
.kf{ display:flex; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
.kf:last-child{ border-bottom:none; }
.kf .kn{ width:34px; height:34px; border-radius:10px; background:var(--acbg); color:var(--ac);
display:flex; align-items:center; justify-content:center; flex:none;
font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:12px; }
.kf b{ display:block; font-size:14px; margin-bottom:3px; }
.kf span{ font-size:13px; color:var(--ink-soft); line-height:1.6; }
.sticker{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:24px;
position:static; }
.sticker .big{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:34px;
letter-spacing:-.035em; color:var(--ac); line-height:1; }
.sticker .lbl{ font-size:12.5px; color:var(--ink-soft); margin:5px 0 18px; }
.sticker ul{ list-style:none; margin-bottom:18px; }
.sticker li{ font-size:13px; padding:6px 0 6px 22px; position:relative; color:var(--ink); }
.sticker li:before{ content:'✓'; position:absolute; left:0; color:var(--ac); font-weight:800; }
.sticker .btn{ width:100%; text-align:center; padding:12px 0; }
.nextprev{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:12px; }
.np{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:20px 22px; }
.np:hover{ border-color:var(--ac); }
.np .t{ font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
color:var(--ink-soft); margin-bottom:6px; display:block; }
.np b{ font-size:16px; display:block; margin-bottom:3px; }
.np span{ font-size:12.5px; color:var(--ink-soft); }
@media (max-width:980px){ .stagehero,.catgrid2,.nextprev{ grid-template-columns:1fr; } .sticker{ position:static; } }
.basepkg{ background:linear-gradient(135deg,#E4F3EA,#F6F4EE); border:2px solid #1E8A55; border-radius:12px;
padding:20px 22px; margin-bottom:22px; display:flex; align-items:center; gap:16px; position:relative; }
.basepkg .bp-tag{ position:absolute; top:-11px; left:18px; background:#1E8A55; color:#fff; font-size:10px;
font-weight:800; letter-spacing:.07em; text-transform:uppercase; border-radius:20px; padding:4px 11px; }
.basepkg .bp-ico{ width:46px; height:46px; border-radius:12px; background:#1E8A55; color:#fff; flex:none;
display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -8px #1E8A55; }
.basepkg .bp-ico svg{ width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.basepkg .bp-info{ flex:1; }
.basepkg .bp-info b{ font-size:16px; display:block; margin-bottom:3px; }
.basepkg .bp-info span{ font-size:12.5px; color:var(--ink-soft); }
.basepkg .bp-price{ text-align:right; flex:none; }
.basepkg .bp-price b{ font-family:'Inter',sans-serif; font-weight:800; font-size:22px; letter-spacing:-.03em; display:block; }
.basepkg .bp-price span{ font-size:11px; color:var(--ink-soft); }
.extraslabel{ font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
color:var(--ink-soft); margin:4px 0 12px; }
.addon{ opacity:.92; }
.sumbase{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:#1E8A55;
background:#E4F3EA; border-radius:8px; padding:9px 12px; margin-bottom:6px; }
.sumbase svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.6;
stroke-linecap:round; stroke-linejoin:round; flex:none; }
.sumextras-label{ font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
color:var(--ink-soft); margin:12px 0 4px; }
.sumtotal{ display:flex; justify-content:space-between; align-items:baseline; border-top:2px solid var(--ink);
margin-top:12px; padding-top:12px; }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
/* ==== operate.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
.mega-stagelink{ display:block; border-radius:8px; margin:-6px -8px 0; padding:6px 8px; transition:background .14s; }
.mega-stagelink:hover{ background:var(--accent-bg); }
.mega-stagelink:hover .mega-name{ text-decoration:underline; }
.mega-all{ display:block !important; font-size:12px; font-weight:800; color:var(--accent) !important;
padding:8px 0 10px !important; margin-bottom:4px; border-bottom:1px solid var(--line); }
.mega-all:hover{ text-decoration:underline; }
.has-mega.suppress .mega{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:static; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.lead{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:660px; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cols2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.pcard:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--pc); }
.pcard .pi{ width:46px; height:46px; border-radius:13px; background:var(--pcbg); color:var(--pc);
display:block; box-sizing:border-box; padding:12px; margin-bottom:16px; }
.pcard .pi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pcard h3{ font-size:17px; margin-bottom:8px; }
.pcard p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.pcard .tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--pcbg); color:var(--pc); border-radius:5px;
padding:4px 8px; margin-bottom:12px; }
.g1{ --pc:var(--s1); --pcbg:var(--s1-bg); } .g2{ --pc:var(--s2); --pcbg:var(--s2-bg); }
.g3{ --pc:var(--s3); --pcbg:var(--s3-bg); } .g4{ --pc:var(--s4); --pcbg:var(--s4-bg); }
.g5{ --pc:var(--s5); --pcbg:var(--s5-bg); } .g6{ --pc:var(--s7); --pcbg:var(--s7-bg); }
.promise{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px 30px; }
.promise li{ list-style:none; font-size:14.5px; padding:9px 0 9px 28px; position:relative;
border-bottom:1px solid var(--line); }
.promise li:last-child{ border-bottom:none; }
.promise li:before{ content:'✓'; position:absolute; left:0; top:9px; color:var(--s1); font-weight:800; }
.kv{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.kv .ki{ width:38px; height:38px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:block; box-sizing:border-box; padding:10px; flex:none; }
.kv .ki svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kv b{ display:block; font-size:14px; margin-bottom:2px; }
.kv span{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.kv a{ color:var(--s1); font-weight:600; }
.form{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px; }
.form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.form input,.form textarea,.form select{ width:100%; border:1px solid var(--line); border-radius:8px;
padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; margin-bottom:16px;
background:var(--ivory); color:var(--ink); box-sizing:border-box; }
.form textarea{ min-height:110px; resize:vertical; }
.form .btn{ width:100%; text-align:center; padding:13px 0; }
.postlist a{ display:block; background:var(--white); border:1px solid var(--line); border-radius:12px;
padding:22px 24px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.postlist a:hover{ border-color:var(--s1); box-shadow:0 14px 30px -22px rgba(22,36,29,.4); }
.postlist .meta{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--pc,var(--s1)); margin-bottom:7px; display:block; }
.postlist b{ font-size:17px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.postlist span.ex{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.timeline2{ border-left:2px solid var(--line); padding-left:26px; margin-left:8px; }
.tl2{ position:relative; padding-bottom:26px; }
.tl2:last-child{ padding-bottom:0; }
.tl2:before{ content:''; position:absolute; left:-33px; top:4px; width:12px; height:12px;
border-radius:50%; background:var(--s1); border:3px solid var(--ivory); }
.tl2 b{ display:block; font-size:15px; margin-bottom:4px; }
.tl2 span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.note{ background:#FBF1DE; border:1px solid #EBDCB6; border-radius:10px; padding:14px 18px;
font-size:13px; color:#6B551F; }
@media (max-width:980px){ .cols3,.cols2,.cols4{ grid-template-columns:1fr; } }
.stage-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }
.stage-chips span{ background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2);
border-radius:20px; padding:7px 15px; font-size:12.5px; font-weight:600; color:#D5DED8; }
.stage-chips span b{ color:#fff; font-weight:800; }
/* featured services */
.feat{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:8px; }
.fcard{ position:relative; background:var(--white); border:1px solid var(--line); border-radius:14px;
padding:26px; display:flex; flex-direction:column; overflow:hidden;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.fcard:before{ content:''; position:absolute; inset:0 0 auto 0; height:4px;
background:linear-gradient(90deg,var(--ac),var(--ac2)); }
.fcard:hover{ box-shadow:0 22px 46px -26px rgba(22,36,29,.45); transform:translateY(-4px); border-color:var(--ac); }
.fcard.pop{ border-color:var(--ac); box-shadow:0 16px 34px -24px rgba(22,36,29,.35); }
.fbadge{ position:absolute; top:16px; right:16px; font-size:9.5px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--ac); color:#fff; border-radius:5px; padding:4px 8px; }
.fcard .fi{ width:46px; height:46px; border-radius:13px; box-sizing:border-box; padding:12px; color:#fff;
display:block; margin:6px 0 16px; background:linear-gradient(140deg,var(--ac),var(--ac2));
box-shadow:0 7px 16px -7px var(--ac); }
.fcard .fi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fcard b{ font-size:18px; display:block; margin-bottom:9px; letter-spacing:-.02em;
min-height:52px; line-height:1.25; }
.fcard .fd{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; flex:1; margin-bottom:18px; }
.fcard .fp{ padding-top:16px; border-top:1px solid var(--line); display:block; }
.fcard .fp .pr{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:24px;
letter-spacing:-.03em; color:var(--ink); display:block; line-height:1; }
.fcard .fp .pr .from{ font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
color:var(--ink-soft); letter-spacing:0; margin-right:3px; }
.fcard .fp .psub{ font-size:11.5px; font-weight:600; color:var(--ink-soft); display:block; margin-top:5px; }
.fcard .fgo{ margin-top:15px; display:flex; align-items:center; justify-content:center; gap:7px;
background:var(--acbg); color:var(--ac); border-radius:9px; padding:11px 0;
font-size:13px; font-weight:800; transition:background .15s, color .15s; }
.fcard:hover .fgo{ background:linear-gradient(140deg,var(--ac),var(--ac2)); color:#fff; }
.fcard.pop .fgo{ background:linear-gradient(140deg,var(--ac),var(--ac2)); color:#fff; }
.featlab{ font-size:11.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
color:var(--ac); margin-bottom:14px; }
/* colourful key facts */
.factgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fact{ background:var(--white); border:1px solid var(--line); border-radius:13px; padding:20px 22px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.fact:hover{ box-shadow:0 16px 34px -24px rgba(22,36,29,.4); transform:translateY(-2px); border-color:var(--fc); }
.fact .fh{ display:flex; align-items:center; gap:12px; margin-bottom:11px; }
.fact .fico{ width:38px; height:38px; border-radius:11px; box-sizing:border-box; padding:10px; color:#fff;
display:block; flex:none; background:linear-gradient(140deg,var(--fc),var(--fc2));
box-shadow:0 6px 13px -6px var(--fc); }
.fact .fico svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; }
.fact .fnum{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:11px;
color:var(--fc); background:var(--fcbg); border-radius:5px; padding:3px 7px; margin-left:auto; }
.fact b{ font-size:15px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.fact span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.f1{ --fc:#1E8A55; --fc2:#2FB273; --fcbg:#E4F3EA; } .f2{ --fc:#2A6FB0; --fc2:#4B95D6; --fcbg:#E6EFF9; }
.f3{ --fc:#C9871A; --fc2:#E5A83E; --fcbg:#FBF1DE; } .f4{ --fc:#7A55A8; --fc2:#9C78C9; --fcbg:#F1EAFA; }
.f5{ --fc:#C25630; --fc2:#DE7A52; --fcbg:#FBEBE3; } .f6{ --fc:#0E8A80; --fc2:#22ADA2; --fcbg:#E1F2F0; }
.faqgrid{ display:grid; grid-template-columns:1fr 1fr; gap:0 44px; border-top:1px solid var(--line); }
.faqgrid details{ border-bottom:1px solid var(--line); padding:15px 0; }
.faqgrid summary{ font-size:14.5px; font-weight:700; cursor:pointer; list-style:none;
display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.faqgrid summary::-webkit-details-marker{ display:none; }
.faqgrid summary:after{ content:'+'; color:var(--ac); font-weight:800; font-size:17px; line-height:1; flex:none; }
.faqgrid details[open] summary:after{ content:'3'; }
.faqgrid details p{ margin-top:10px; font-size:13.5px; color:var(--ink-soft); line-height:1.65; }
/* prominent next-stage band */
.stagenav{ display:flex; flex-direction:column; gap:14px; }
.nextband{ position:relative; overflow:hidden; border-radius:14px; padding:24px 28px; color:#fff;
background:linear-gradient(115deg,var(--nc) 0%,var(--nc2) 100%);
display:flex; align-items:center; gap:22px;
box-shadow:0 18px 40px -26px var(--nc); transition:transform .18s, box-shadow .18s; }
.nextband:before{ content:''; position:absolute; right:-40px; top:-56px; width:190px; height:190px;
border-radius:50%; background:rgba(255,255,255,.10); }
.nextband:after{ content:''; position:absolute; right:56px; bottom:-80px; width:140px; height:140px;
border-radius:50%; background:rgba(255,255,255,.07); }
.nextband:hover{ transform:translateY(-2px); box-shadow:0 24px 48px -26px var(--nc); }
.nextband .nbtxt{ position:relative; z-index:1; flex:1; }
.nextband .t{ font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
opacity:.85; margin-bottom:6px; display:block; }
.nextband b{ font-size:23px; display:block; margin-bottom:4px; letter-spacing:-.03em; line-height:1.1;
font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; }
.nextband span.d{ font-size:13.5px; opacity:.92; line-height:1.5; display:block; max-width:420px; }
.nextband .cta{ position:relative; z-index:1; flex:none; display:flex; align-items:center; gap:9px;
background:#fff; color:var(--nc); border-radius:26px; padding:11px 20px;
font-size:13.5px; font-weight:800; letter-spacing:-.01em; box-shadow:0 7px 16px -8px rgba(0,0,0,.3); }
.nextband .cta svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.6;
stroke-linecap:round; stroke-linejoin:round; transition:transform .18s; }
.nextband:hover .cta svg{ transform:translateX(3px); }
.prevlink{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700;
color:var(--ink-soft); align-self:flex-start; }
.prevlink:hover{ color:var(--ink); }
.prevlink svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.4;
stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:980px){ .faqgrid{ grid-template-columns:1fr; }
.nextband{ flex-direction:column; align-items:flex-start; padding:30px; } }
@media (max-width:980px){ .feat,.factgrid,.stagenav{ grid-template-columns:1fr; } }
.stagehero{ display:grid; grid-template-columns:1fr 300px; gap:44px; align-items:start; }
.catgrid2{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cat2{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:22px;
display:flex; flex-direction:column; transition:box-shadow .18s, transform .18s, border-color .18s; }
.cat2:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.42); transform:translateY(-3px); border-color:var(--cac,var(--ac)); }
.cat2 .ci2{ width:42px; height:42px; border-radius:12px; box-sizing:border-box; padding:11px; color:#fff;
display:block; margin-bottom:14px; background:linear-gradient(140deg,var(--cac,var(--ac)),var(--cac2,var(--ac2)));
box-shadow:0 6px 14px -6px var(--cac,var(--ac)); }
.cat2 .ci2 svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cat2 b{ font-size:15.5px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.cat2 span.d{ font-size:13px; color:var(--ink-soft); line-height:1.55; flex:1; }
.cat2 .n{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
font-size:12px; font-weight:700; color:var(--ac); }
.grouphead{ font-size:11.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
color:var(--ac); margin:34px 0 14px; padding-bottom:9px; border-bottom:1px solid var(--line); }
.grouphead:first-of-type{ margin-top:0; }
.keyfacts{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px 28px; }
.kf{ display:flex; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
.kf:last-child{ border-bottom:none; }
.kf .kn{ width:34px; height:34px; border-radius:10px; background:var(--acbg); color:var(--ac);
display:flex; align-items:center; justify-content:center; flex:none;
font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:12px; }
.kf b{ display:block; font-size:14px; margin-bottom:3px; }
.kf span{ font-size:13px; color:var(--ink-soft); line-height:1.6; }
.sticker{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:24px;
position:static; }
.sticker .big{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:34px;
letter-spacing:-.035em; color:var(--ac); line-height:1; }
.sticker .lbl{ font-size:12.5px; color:var(--ink-soft); margin:5px 0 18px; }
.sticker ul{ list-style:none; margin-bottom:18px; }
.sticker li{ font-size:13px; padding:6px 0 6px 22px; position:relative; color:var(--ink); }
.sticker li:before{ content:'✓'; position:absolute; left:0; color:var(--ac); font-weight:800; }
.sticker .btn{ width:100%; text-align:center; padding:12px 0; }
.nextprev{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:12px; }
.np{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:20px 22px; }
.np:hover{ border-color:var(--ac); }
.np .t{ font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
color:var(--ink-soft); margin-bottom:6px; display:block; }
.np b{ font-size:16px; display:block; margin-bottom:3px; }
.np span{ font-size:12.5px; color:var(--ink-soft); }
@media (max-width:980px){ .stagehero,.catgrid2,.nextprev{ grid-template-columns:1fr; } .sticker{ position:static; } }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
/* ==== close.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
.has-mega.suppress .mega{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Inter', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:static; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Inter', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.lead{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:660px; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cols2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.pcard:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--pc); }
.pcard .pi{ width:46px; height:46px; border-radius:13px; background:var(--pcbg); color:var(--pc);
display:block; box-sizing:border-box; padding:12px; margin-bottom:16px; }
.pcard .pi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pcard h3{ font-size:17px; margin-bottom:8px; }
.pcard p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.pcard .tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--pcbg); color:var(--pc); border-radius:5px;
padding:4px 8px; margin-bottom:12px; }
.g1{ --pc:var(--s1); --pcbg:var(--s1-bg); } .g2{ --pc:var(--s2); --pcbg:var(--s2-bg); }
.g3{ --pc:var(--s3); --pcbg:var(--s3-bg); } .g4{ --pc:var(--s4); --pcbg:var(--s4-bg); }
.g5{ --pc:var(--s5); --pcbg:var(--s5-bg); } .g6{ --pc:var(--s7); --pcbg:var(--s7-bg); }
.promise{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px 30px; }
.promise li{ list-style:none; font-size:14.5px; padding:9px 0 9px 28px; position:relative;
border-bottom:1px solid var(--line); }
.promise li:last-child{ border-bottom:none; }
.promise li:before{ content:'✓'; position:absolute; left:0; top:9px; color:var(--s1); font-weight:800; }
.kv{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.kv .ki{ width:38px; height:38px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:block; box-sizing:border-box; padding:10px; flex:none; }
.kv .ki svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kv b{ display:block; font-size:14px; margin-bottom:2px; }
.kv span{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.kv a{ color:var(--s1); font-weight:600; }
.form{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px; }
.form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.form input,.form textarea,.form select{ width:100%; border:1px solid var(--line); border-radius:8px;
padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; margin-bottom:16px;
background:var(--ivory); color:var(--ink); box-sizing:border-box; }
.form textarea{ min-height:110px; resize:vertical; }
.form .btn{ width:100%; text-align:center; padding:13px 0; }
.postlist a{ display:block; background:var(--white); border:1px solid var(--line); border-radius:12px;
padding:22px 24px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.postlist a:hover{ border-color:var(--s1); box-shadow:0 14px 30px -22px rgba(22,36,29,.4); }
.postlist .meta{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--pc,var(--s1)); margin-bottom:7px; display:block; }
.postlist b{ font-size:17px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.postlist span.ex{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.timeline2{ border-left:2px solid var(--line); padding-left:26px; margin-left:8px; }
.tl2{ position:relative; padding-bottom:26px; }
.tl2:last-child{ padding-bottom:0; }
.tl2:before{ content:''; position:absolute; left:-33px; top:4px; width:12px; height:12px;
border-radius:50%; background:var(--s1); border:3px solid var(--ivory); }
.tl2 b{ display:block; font-size:15px; margin-bottom:4px; }
.tl2 span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.note{ background:#FBF1DE; border:1px solid #EBDCB6; border-radius:10px; padding:14px 18px;
font-size:13px; color:#6B551F; }
@media (max-width:980px){ .cols3,.cols2,.cols4{ grid-template-columns:1fr; } }
.stage-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }
.stage-chips span{ background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2);
border-radius:20px; padding:7px 15px; font-size:12.5px; font-weight:600; color:#D5DED8; }
.stage-chips span b{ color:#fff; font-weight:800; }
/* featured services */
.feat{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:8px; }
.fcard{ position:relative; background:var(--white); border:1px solid var(--line); border-radius:14px;
padding:26px; display:flex; flex-direction:column; overflow:hidden;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.fcard:before{ content:''; position:absolute; inset:0 0 auto 0; height:4px;
background:linear-gradient(90deg,var(--ac),var(--ac2)); }
.fcard:hover{ box-shadow:0 22px 46px -26px rgba(22,36,29,.45); transform:translateY(-4px); border-color:var(--ac); }
.fcard.pop{ border-color:var(--ac); box-shadow:0 16px 34px -24px rgba(22,36,29,.35); }
.fbadge{ position:absolute; top:16px; right:16px; font-size:9.5px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--ac); color:#fff; border-radius:5px; padding:4px 8px; }
.fcard .fi{ width:46px; height:46px; border-radius:13px; box-sizing:border-box; padding:12px; color:#fff;
display:block; margin:6px 0 16px; background:linear-gradient(140deg,var(--ac),var(--ac2));
box-shadow:0 7px 16px -7px var(--ac); }
.fcard .fi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fcard b{ font-size:18px; display:block; margin-bottom:9px; letter-spacing:-.02em;
min-height:52px; line-height:1.25; }
.fcard .fd{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; flex:1; margin-bottom:18px; }
.fcard .fp{ padding-top:16px; border-top:1px solid var(--line); display:block; }
.fcard .fp .pr{ font-family:'Inter',sans-serif; font-weight:800; font-size:24px;
letter-spacing:-.03em; color:var(--ink); display:block; line-height:1; }
.fcard .fp .pr .from{ font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
color:var(--ink-soft); letter-spacing:0; margin-right:3px; }
.fcard .fp .psub{ font-size:11.5px; font-weight:600; color:var(--ink-soft); display:block; margin-top:5px; }
.fcard .fgo{ margin-top:15px; display:flex; align-items:center; justify-content:center; gap:7px;
background:var(--acbg); color:var(--ac); border-radius:9px; padding:11px 0;
font-size:13px; font-weight:800; transition:background .15s, color .15s; }
.fcard:hover .fgo{ background:linear-gradient(140deg,var(--ac),var(--ac2)); color:#fff; }
.fcard.pop .fgo{ background:linear-gradient(140deg,var(--ac),var(--ac2)); color:#fff; }
.featlab{ font-size:11.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
color:var(--ac); margin-bottom:14px; }
/* colourful key facts */
.factgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fact{ background:var(--white); border:1px solid var(--line); border-radius:13px; padding:20px 22px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.fact:hover{ box-shadow:0 16px 34px -24px rgba(22,36,29,.4); transform:translateY(-2px); border-color:var(--fc); }
.fact .fh{ display:flex; align-items:center; gap:12px; margin-bottom:11px; }
.fact .fico{ width:38px; height:38px; border-radius:11px; box-sizing:border-box; padding:10px; color:#fff;
display:block; flex:none; background:linear-gradient(140deg,var(--fc),var(--fc2));
box-shadow:0 6px 13px -6px var(--fc); }
.fact .fico svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; }
.fact .fnum{ font-family:'Inter',sans-serif; font-weight:800; font-size:11px;
color:var(--fc); background:var(--fcbg); border-radius:5px; padding:3px 7px; margin-left:auto; }
.fact b{ font-size:15px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.fact span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.f1{ --fc:#1E8A55; --fc2:#2FB273; --fcbg:#E4F3EA; } .f2{ --fc:#2A6FB0; --fc2:#4B95D6; --fcbg:#E6EFF9; }
.f3{ --fc:#C9871A; --fc2:#E5A83E; --fcbg:#FBF1DE; } .f4{ --fc:#7A55A8; --fc2:#9C78C9; --fcbg:#F1EAFA; }
.f5{ --fc:#C25630; --fc2:#DE7A52; --fcbg:#FBEBE3; } .f6{ --fc:#0E8A80; --fc2:#22ADA2; --fcbg:#E1F2F0; }
.faqgrid{ display:grid; grid-template-columns:1fr 1fr; gap:0 44px; border-top:1px solid var(--line); }
.faqgrid details{ border-bottom:1px solid var(--line); padding:15px 0; }
.faqgrid summary{ font-size:14.5px; font-weight:700; cursor:pointer; list-style:none;
display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.faqgrid summary::-webkit-details-marker{ display:none; }
.faqgrid summary:after{ content:'+'; color:var(--ac); font-weight:800; font-size:17px; line-height:1; flex:none; }
.faqgrid details[open] summary:after{ content:'3'; }
.faqgrid details p{ margin-top:10px; font-size:13.5px; color:var(--ink-soft); line-height:1.65; }
/* prominent next-stage band */
.stagenav{ display:flex; flex-direction:column; gap:14px; }
.nextband{ position:relative; overflow:hidden; border-radius:14px; padding:24px 28px; color:#fff;
background:linear-gradient(115deg,var(--nc) 0%,var(--nc2) 100%);
display:flex; align-items:center; gap:22px;
box-shadow:0 18px 40px -26px var(--nc); transition:transform .18s, box-shadow .18s; }
.nextband:before{ content:''; position:absolute; right:-40px; top:-56px; width:190px; height:190px;
border-radius:50%; background:rgba(255,255,255,.10); }
.nextband:after{ content:''; position:absolute; right:56px; bottom:-80px; width:140px; height:140px;
border-radius:50%; background:rgba(255,255,255,.07); }
.nextband:hover{ transform:translateY(-2px); box-shadow:0 24px 48px -26px var(--nc); }
.nextband .nbtxt{ position:relative; z-index:1; flex:1; }
.nextband .t{ font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
opacity:.85; margin-bottom:6px; display:block; }
.nextband b{ font-size:23px; display:block; margin-bottom:4px; letter-spacing:-.03em; line-height:1.1;
font-family:'Inter',sans-serif; font-weight:800; }
.nextband span.d{ font-size:13.5px; opacity:.92; line-height:1.5; display:block; max-width:420px; }
.nextband .cta{ position:relative; z-index:1; flex:none; display:flex; align-items:center; gap:9px;
background:#fff; color:var(--nc); border-radius:26px; padding:11px 20px;
font-size:13.5px; font-weight:800; letter-spacing:-.01em; box-shadow:0 7px 16px -8px rgba(0,0,0,.3); }
.nextband .cta svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.6;
stroke-linecap:round; stroke-linejoin:round; transition:transform .18s; }
.nextband:hover .cta svg{ transform:translateX(3px); }
.prevlink{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700;
color:var(--ink-soft); align-self:flex-start; }
.prevlink:hover{ color:var(--ink); }
.prevlink svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.4;
stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:980px){ .faqgrid{ grid-template-columns:1fr; }
.nextband{ flex-direction:column; align-items:flex-start; padding:30px; } }
@media (max-width:980px){ .feat,.factgrid,.stagenav{ grid-template-columns:1fr; } }
.stagehero{ display:grid; grid-template-columns:1fr 300px; gap:44px; align-items:start; }
.catgrid2{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cat2{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:22px;
display:flex; flex-direction:column; transition:box-shadow .18s, transform .18s, border-color .18s; }
.cat2:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.42); transform:translateY(-3px); border-color:var(--ac); }
.cat2 .ci2{ width:42px; height:42px; border-radius:12px; box-sizing:border-box; padding:11px; color:#fff;
display:block; margin-bottom:14px; background:linear-gradient(140deg,var(--ac),var(--ac2));
box-shadow:0 6px 14px -6px var(--ac); }
.cat2 .ci2 svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cat2 b{ font-size:15.5px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.cat2 span.d{ font-size:13px; color:var(--ink-soft); line-height:1.55; flex:1; }
.cat2 .n{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
font-size:12px; font-weight:700; color:var(--ac); }
.grouphead{ font-size:11.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
color:var(--ac); margin:34px 0 14px; padding-bottom:9px; border-bottom:1px solid var(--line); }
.grouphead:first-of-type{ margin-top:0; }
.keyfacts{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px 28px; }
.kf{ display:flex; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
.kf:last-child{ border-bottom:none; }
.kf .kn{ width:34px; height:34px; border-radius:10px; background:var(--acbg); color:var(--ac);
display:flex; align-items:center; justify-content:center; flex:none;
font-family:'Inter',sans-serif; font-weight:800; font-size:12px; }
.kf b{ display:block; font-size:14px; margin-bottom:3px; }
.kf span{ font-size:13px; color:var(--ink-soft); line-height:1.6; }
.sticker{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:24px;
position:static; }
.sticker .big{ font-family:'Inter',sans-serif; font-weight:800; font-size:34px;
letter-spacing:-.035em; color:var(--ac); line-height:1; }
.sticker .lbl{ font-size:12.5px; color:var(--ink-soft); margin:5px 0 18px; }
.sticker ul{ list-style:none; margin-bottom:18px; }
.sticker li{ font-size:13px; padding:6px 0 6px 22px; position:relative; color:var(--ink); }
.sticker li:before{ content:'✓'; position:absolute; left:0; color:var(--ac); font-weight:800; }
.sticker .btn{ width:100%; text-align:center; padding:12px 0; }
.nextprev{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:12px; }
.np{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:20px 22px; }
.np:hover{ border-color:var(--ac); }
.np .t{ font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
color:var(--ink-soft); margin-bottom:6px; display:block; }
.np b{ font-size:16px; display:block; margin-bottom:3px; }
.np span{ font-size:12.5px; color:var(--ink-soft); }
@media (max-width:980px){ .stagehero,.catgrid2,.nextprev{ grid-template-columns:1fr; } .sticker{ position:static; } }
.head2{ display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:start; margin-bottom:44px; }
.head2 .eyebrow{ display:block; margin-bottom:14px; }
.head2 h2{ font-size:30px; font-weight:800; letter-spacing:-.03em; margin:0; line-height:1.25; }
.head2 p{ color:var(--ink-soft); font-size:15.5px; line-height:1.7; margin:0; padding-top:30px; }
@media (max-width:980px){ .head2{ grid-template-columns:1fr; gap:16px; align-items:start; } .head2 p{ padding-top:0; } }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
/* ==== formation.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
.mega-stagelink{ display:block; border-radius:8px; margin:-6px -8px 0; padding:6px 8px; transition:background .14s; }
.mega-stagelink:hover{ background:var(--accent-bg); }
.mega-stagelink:hover .mega-name{ text-decoration:underline; }
.mega-all{ display:block !important; font-size:12px; font-weight:800; color:var(--accent) !important;
padding:8px 0 10px !important; margin-bottom:4px; border-bottom:1px solid var(--line); }
.mega-all:hover{ text-decoration:underline; }
.has-mega.suppress .mega{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Inter', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:static; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Inter', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
.cmp{ width:100%; border-collapse:collapse; background:var(--white);
border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.cmp th, .cmp td{ padding:13px 16px; text-align:left; font-size:13.5px; border-bottom:1px solid var(--line); }
.cmp thead th{ background:#FBFAF7; vertical-align:top; }
.cmp thead th.plan{ text-align:center; width:19%; }
.plan-name{ font-family:'Inter',sans-serif; font-weight:800; font-size:15px; letter-spacing:-0.02em; display:block; }
.plan-price{ font-family:'Inter',sans-serif; font-weight:800; font-size:23px; letter-spacing:-0.03em;
color:var(--s1); display:block; margin:7px 0 2px; }
.plan-vat{ font-size:10.5px; color:var(--ink-soft); display:block; font-weight:500; }
.plan-tag{ display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
background:var(--s1-bg); color:var(--s1); border-radius:4px; padding:3px 7px; margin-bottom:8px; }
.cmp td.tick, .cmp th.plan{ text-align:center; }
.cmp td.tick span{ color:var(--s1); font-weight:800; }
.cmp td.tick .no{ color:#C9C4B4; font-weight:600; }
.cmp tbody tr:last-child td{ border-bottom:none; }
.cmp .featcol{ font-weight:500; }
.cmp tfoot td{ background:#FBFAF7; text-align:center; }
.typegrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.typecard{ background:var(--white); border:1px solid var(--line); border-radius:8px; padding:16px 18px;
display:flex; justify-content:space-between; align-items:center; gap:14px; }
.typecard:hover{ border-color:var(--s1); }
.typecard b{ font-size:14px; display:block; }
.typecard span{ font-size:12px; color:var(--ink-soft); display:block; margin-top:3px; line-height:1.4; }
.typecard .pr{ font-family:'Inter',sans-serif; font-weight:800; font-size:15px; flex:none; letter-spacing:-0.02em; }
.steps2{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.step2{ background:var(--white); border:1px solid var(--line); border-radius:8px; padding:18px; }
.step2 .n{ width:28px; height:28px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; margin-bottom:11px; }
.step2 b{ font-size:13.5px; display:block; margin-bottom:5px; }
.step2 span{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
.needs{ display:grid; grid-template-columns:1fr 1fr; gap:10px 26px; }
.needs div{ font-size:13.5px; padding:8px 0 8px 22px; position:relative; border-bottom:1px solid var(--line); }
.needs div:before{ content:'✓'; position:absolute; left:0; color:var(--s1); font-weight:800; }
@media (max-width:980px){ .typegrid,.steps2,.needs{ grid-template-columns:1fr; } .cmp{ font-size:12px; } }
.cfg{ display:grid; grid-template-columns:1fr 300px; gap:26px; align-items:start; }
.addon{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:16px 18px;
display:flex; gap:14px; align-items:flex-start; margin-bottom:10px; cursor:pointer; transition:border-color .15s; }
.addon:hover{ border-color:var(--s1); }
.addon input{ margin-top:3px; width:16px; height:16px; accent-color:#1F7A4D; flex:none; }
.addon .ainfo{ flex:1; }
.addon b{ font-size:14px; display:block; margin-bottom:3px; }
.addon span{ font-size:12.5px; color:var(--ink-soft); display:block; line-height:1.45; }
.addon .aprice{ text-align:right; flex:none; }
.addon .aprice b{ font-family:'Inter',sans-serif; font-weight:800; font-size:15px; letter-spacing:-0.02em; }
.addon .aprice span{ font-size:10.5px; }
.sumcard{ background:var(--white); border:1px solid var(--line); border-radius:10px; padding:22px;
position:static; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.sumcard h4{ font-size:13px; font-family:'Inter',sans-serif; font-weight:700; letter-spacing:0.06em;
text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px; }
.sumrow{ display:flex; justify-content:space-between; font-size:13px; padding:7px 0; }
.sumrow.base{ border-bottom:1px solid var(--line); padding-bottom:11px; margin-bottom:4px; }
.sumbase{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:#1E8A55;
background:#E4F3EA; border-radius:8px; padding:9px 12px; margin-bottom:6px; }
.sumbase svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.6;
stroke-linecap:round; stroke-linejoin:round; flex:none; }
.sumextras-label{ font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
color:var(--ink-soft); margin:12px 0 4px; }
.sumtotal{ display:flex; justify-content:space-between; align-items:baseline; border-top:2px solid var(--ink);
margin-top:12px; padding-top:12px; }
.sumtotal b{ font-size:13px; }
.sumtotal .tv{ font-family:'Inter',sans-serif; font-weight:800; font-size:24px;
letter-spacing:-0.03em; color:var(--s1); }
.sumcard .btn{ width:100%; text-align:center; margin-top:16px; padding:12px 0; }
.ten{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.tenitem{ padding:17px 19px; }
.tenitem{ background:var(--white); border:1px solid var(--line); border-radius:8px; padding:15px 17px;
display:flex; gap:13px; align-items:flex-start; }
.tenitem .tn{ width:24px; height:24px; border-radius:7px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-weight:800; font-size:11px; flex:none; }
.tenitem b{ font-size:13.5px; display:block; margin-bottom:2px; }
.tenitem span{ font-size:12px; color:var(--ink-soft); line-height:1.45; }
@media (max-width:980px){ .cfg,.ten{ grid-template-columns:1fr; } .sumcard{ position:static; } }
/* ==== shared visual system ==== */
.t-green{ background:var(--s1-bg); color:var(--s1); }
.t-blue{ background:var(--s2-bg); color:var(--s2); }
.t-amber{ background:var(--s3-bg); color:var(--s3); }
.t-violet{ background:var(--s4-bg); color:var(--s4); }
.t-rust{ background:var(--s5-bg); color:var(--s5); }
.t-teal{ background:var(--s7-bg,#E6F1F0); color:var(--s7,#12706B); }
/* horizontal timeline */
.tl{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:34px; }
.tl:before{ content:''; position:absolute; top:26px; left:11%; right:11%; height:2px;
background:linear-gradient(90deg,var(--s1) 0%,var(--s2) 45%,var(--s4) 100%); opacity:.35; }
.tlstep{ text-align:center; padding:0 12px; position:relative; }
.tlstep .dot{ width:52px; height:52px; border-radius:50%; background:var(--white);
border:2px solid var(--accent,#1F7A4D); color:var(--accent,#1F7A4D);
display:flex; align-items:center; justify-content:center; margin:0 auto 14px; position:relative; z-index:2; }
.tlstep .dot svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.6;
stroke-linecap:round; stroke-linejoin:round; }
.tlstep .day{ font-size:10px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
color:var(--accent,#1F7A4D); margin-bottom:5px; }
.tlstep b{ font-size:14px; display:block; margin-bottom:5px; }
.tlstep span{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; display:block; }
/* bar chart */
.chart{ background:var(--white); border:1px solid var(--line); border-radius:10px; padding:24px 26px; }
.bar-row{ margin-bottom:18px; }
.bar-row:last-child{ margin-bottom:0; }
.bar-lab{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; }
.bar-lab b{ font-size:13.5px; }
.bar-lab .v{ font-family:'Inter',sans-serif; font-weight:800; font-size:14px; letter-spacing:-0.02em; }
.bar-track{ height:12px; background:var(--ivory-2); border-radius:7px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:7px; }
.bar-note{ font-size:11.5px; color:var(--ink-soft); margin-top:5px; }
.tenitem{ align-items:flex-start; }
.cmp thead th.plan.pop{ background:var(--s1-bg); }
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.head2{ display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:start; margin-bottom:44px; }
.head2 .eyebrow{ display:block; margin-bottom:14px; }
.head2 h2{ font-size:30px; font-weight:800; letter-spacing:-.03em; margin:0; line-height:1.25; }
.head2 p{ color:var(--ink-soft); font-size:15.5px; line-height:1.7; margin:0; padding-top:30px; }
@media (max-width:980px){ .head2{ grid-template-columns:1fr; gap:16px; align-items:start; } .head2 p{ padding-top:0; } }
.basepkg{ background:linear-gradient(135deg,#E4F3EA,#F6F4EE); border:2px solid #1E8A55; border-radius:12px;
padding:20px 22px; margin-bottom:22px; display:flex; align-items:center; gap:16px; position:relative; }
.basepkg .bp-tag{ position:absolute; top:-11px; left:18px; background:#1E8A55; color:#fff; font-size:10px;
font-weight:800; letter-spacing:.07em; text-transform:uppercase; border-radius:20px; padding:4px 11px; }
.basepkg .bp-ico{ width:46px; height:46px; border-radius:12px; background:#1E8A55; color:#fff; flex:none;
display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -8px #1E8A55; }
.basepkg .bp-ico svg{ width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.basepkg .bp-info{ flex:1; }
.basepkg .bp-info b{ font-size:16px; display:block; margin-bottom:3px; }
.basepkg .bp-info span{ font-size:12.5px; color:var(--ink-soft); }
.basepkg .bp-price{ text-align:right; flex:none; }
.basepkg .bp-price b{ font-family:'Inter',sans-serif; font-weight:800; font-size:22px; letter-spacing:-.03em; display:block; }
.basepkg .bp-price span{ font-size:11px; color:var(--ink-soft); }
.extraslabel{ font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
color:var(--ink-soft); margin:4px 0 12px; }
.addon{ opacity:.92; }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
/* ==== bundle-byoc.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:sticky; top:24px; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.lead{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:660px; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cols2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.pcard:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--pc); }
.pcard .pi{ width:46px; height:46px; border-radius:13px; background:var(--pcbg); color:var(--pc);
display:block; box-sizing:border-box; padding:12px; margin-bottom:16px; }
.pcard .pi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pcard h3{ font-size:17px; margin-bottom:8px; }
.pcard p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.pcard .tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--pcbg); color:var(--pc); border-radius:5px;
padding:4px 8px; margin-bottom:12px; }
.g1{ --pc:var(--s1); --pcbg:var(--s1-bg); } .g2{ --pc:var(--s2); --pcbg:var(--s2-bg); }
.g3{ --pc:var(--s3); --pcbg:var(--s3-bg); } .g4{ --pc:var(--s4); --pcbg:var(--s4-bg); }
.g5{ --pc:var(--s5); --pcbg:var(--s5-bg); } .g6{ --pc:var(--s7); --pcbg:var(--s7-bg); }
.promise{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px 30px; }
.promise li{ list-style:none; font-size:14.5px; padding:9px 0 9px 28px; position:relative;
border-bottom:1px solid var(--line); }
.promise li:last-child{ border-bottom:none; }
.promise li:before{ content:'✓'; position:absolute; left:0; top:9px; color:var(--s1); font-weight:800; }
.kv{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.kv .ki{ width:38px; height:38px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:block; box-sizing:border-box; padding:10px; flex:none; }
.kv .ki svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kv b{ display:block; font-size:14px; margin-bottom:2px; }
.kv span{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.kv a{ color:var(--s1); font-weight:600; }
.form{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px; }
.form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.form input,.form textarea,.form select{ width:100%; border:1px solid var(--line); border-radius:8px;
padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; margin-bottom:16px;
background:var(--ivory); color:var(--ink); box-sizing:border-box; }
.form textarea{ min-height:110px; resize:vertical; }
.form .btn{ width:100%; text-align:center; padding:13px 0; }
.postlist a{ display:block; background:var(--white); border:1px solid var(--line); border-radius:12px;
padding:22px 24px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.postlist a:hover{ border-color:var(--s1); box-shadow:0 14px 30px -22px rgba(22,36,29,.4); }
.postlist .meta{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--pc,var(--s1)); margin-bottom:7px; display:block; }
.postlist b{ font-size:17px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.postlist span.ex{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.timeline2{ border-left:2px solid var(--line); padding-left:26px; margin-left:8px; }
.tl2{ position:relative; padding-bottom:26px; }
.tl2:last-child{ padding-bottom:0; }
.tl2:before{ content:''; position:absolute; left:-33px; top:4px; width:12px; height:12px;
border-radius:50%; background:var(--s1); border:3px solid var(--ivory); }
.tl2 b{ display:block; font-size:15px; margin-bottom:4px; }
.tl2 span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.note{ background:#FBF1DE; border:1px solid #EBDCB6; border-radius:10px; padding:14px 18px;
font-size:13px; color:#6B551F; }
@media (max-width:980px){ .cols3,.cols2,.cols4{ grid-template-columns:1fr; } }
.basepkg{ background:linear-gradient(135deg,#E4F3EA,#F6F4EE); border:2px solid #1E8A55; border-radius:12px;
padding:20px 22px; margin-bottom:22px; display:flex; align-items:center; gap:16px; position:relative; }
.basepkg .bp-tag{ position:absolute; top:-11px; left:18px; background:#1E8A55; color:#fff; font-size:10px;
font-weight:800; letter-spacing:.07em; text-transform:uppercase; border-radius:20px; padding:4px 11px; }
.basepkg .bp-ico{ width:46px; height:46px; border-radius:12px; background:#1E8A55; color:#fff; flex:none;
display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -8px #1E8A55; }
.basepkg .bp-ico svg{ width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.basepkg .bp-info{ flex:1; }
.basepkg .bp-info b{ font-size:16px; display:block; margin-bottom:3px; }
.basepkg .bp-info span{ font-size:12.5px; color:var(--ink-soft); }
.basepkg .bp-price{ text-align:right; flex:none; }
.basepkg .bp-price b{ font-family:'Inter',sans-serif; font-weight:800; font-size:22px; letter-spacing:-.03em; display:block; }
.basepkg .bp-price span{ font-size:11px; color:var(--ink-soft); }
.extraslabel{ font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
color:var(--ink-soft); margin:4px 0 12px; }
.addon{ opacity:.92; }
.ainfo{ flex:1; }
.aprice{ text-align:right; flex:none; }
.addon .aprice b{ font-family:'Inter',sans-serif; font-weight:800; font-size:15px; letter-spacing:-0.02em; }
.addon .aprice span{ font-size:10.5px; }
.sumcard{ background:var(--white); border:1px solid var(--line); border-radius:10px; padding:22px;
position:static; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.sumcard h4{ font-size:13px; font-family:'Inter',sans-serif; font-weight:700; letter-spacing:0.06em;
text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px; }
.sumrow{ display:flex; justify-content:space-between; font-size:13px; padding:7px 0; }
.sumbase{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:#1E8A55;
background:#E4F3EA; border-radius:8px; padding:9px 12px; margin-bottom:6px; }
.sumbase svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.6;
stroke-linecap:round; stroke-linejoin:round; flex:none; }
.sumextras-label{ font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
color:var(--ink-soft); margin:12px 0 4px; }
.sumextras-label{ font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
color:var(--ink-soft); margin:12px 0 4px; }
.sumtotal{ display:flex; justify-content:space-between; align-items:baseline; border-top:2px solid var(--ink);
margin-top:12px; padding-top:12px; }
.sumtotal b{ font-size:13px; }
.sumtotal .tv{ font-family:'Inter',sans-serif; font-weight:800; font-size:24px;
letter-spacing:-0.03em; color:var(--s1); }
.cfg{ display:grid; grid-template-columns:1fr 300px; gap:26px; align-items:start; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
/* ==== bundle-startup.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:static; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.lead{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:660px; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cols2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.pcard:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--pc); }
.pcard .pi{ width:46px; height:46px; border-radius:13px; background:var(--pcbg); color:var(--pc);
display:block; box-sizing:border-box; padding:12px; margin-bottom:16px; }
.pcard .pi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pcard h3{ font-size:17px; margin-bottom:8px; }
.pcard p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.pcard .tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--pcbg); color:var(--pc); border-radius:5px;
padding:4px 8px; margin-bottom:12px; }
.g1{ --pc:var(--s1); --pcbg:var(--s1-bg); } .g2{ --pc:var(--s2); --pcbg:var(--s2-bg); }
.g3{ --pc:var(--s3); --pcbg:var(--s3-bg); } .g4{ --pc:var(--s4); --pcbg:var(--s4-bg); }
.g5{ --pc:var(--s5); --pcbg:var(--s5-bg); } .g6{ --pc:var(--s7); --pcbg:var(--s7-bg); }
.promise{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px 30px; }
.promise li{ list-style:none; font-size:14.5px; padding:9px 0 9px 28px; position:relative;
border-bottom:1px solid var(--line); }
.promise li:last-child{ border-bottom:none; }
.promise li:before{ content:'✓'; position:absolute; left:0; top:9px; color:var(--s1); font-weight:800; }
.kv{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.kv .ki{ width:38px; height:38px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:block; box-sizing:border-box; padding:10px; flex:none; }
.kv .ki svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kv b{ display:block; font-size:14px; margin-bottom:2px; }
.kv span{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.kv a{ color:var(--s1); font-weight:600; }
.form{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px; }
.form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.form input,.form textarea,.form select{ width:100%; border:1px solid var(--line); border-radius:8px;
padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; margin-bottom:16px;
background:var(--ivory); color:var(--ink); box-sizing:border-box; }
.form textarea{ min-height:110px; resize:vertical; }
.form .btn{ width:100%; text-align:center; padding:13px 0; }
.postlist a{ display:block; background:var(--white); border:1px solid var(--line); border-radius:12px;
padding:22px 24px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.postlist a:hover{ border-color:var(--s1); box-shadow:0 14px 30px -22px rgba(22,36,29,.4); }
.postlist .meta{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--pc,var(--s1)); margin-bottom:7px; display:block; }
.postlist b{ font-size:17px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.postlist span.ex{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.timeline2{ border-left:2px solid var(--line); padding-left:26px; margin-left:8px; }
.tl2{ position:relative; padding-bottom:26px; }
.tl2:last-child{ padding-bottom:0; }
.tl2:before{ content:''; position:absolute; left:-33px; top:4px; width:12px; height:12px;
border-radius:50%; background:var(--s1); border:3px solid var(--ivory); }
.tl2 b{ display:block; font-size:15px; margin-bottom:4px; }
.tl2 span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.note{ background:#FBF1DE; border:1px solid #EBDCB6; border-radius:10px; padding:14px 18px;
font-size:13px; color:#6B551F; }
@media (max-width:980px){ .cols3,.cols2,.cols4{ grid-template-columns:1fr; } }
.bhero{ display:grid; grid-template-columns:1fr 320px; gap:44px; align-items:start; }
.bincl{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:20px 0 32px; }
.bitem{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:18px 20px; display:flex; gap:13px; }
.bitem .bi-ico{ width:36px; height:36px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; flex:none; }
.bitem .bi-ico svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.bitem b{ font-size:14px; display:block; margin-bottom:3px; }
.bitem span{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
.bbreak{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:26px 28px; margin-bottom:32px; }
.bbreak li{ list-style:none; font-size:13.5px; padding:8px 0 8px 26px; position:relative; color:var(--ink-soft);
border-bottom:1px solid var(--line); }
.bbreak li:last-child{ border-bottom:none; }
.bbreak li:before{ content:'\2713'; position:absolute; left:0; color:var(--s1); font-weight:800; }
.bwhy{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:36px; }
.bwhy div{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:20px; }
.bwhy .bw-ico{ width:38px; height:38px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.bwhy .bw-ico svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.bwhy b{ font-size:14px; display:block; margin-bottom:5px; }
.bwhy span{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
.bsticky{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:26px; position:static; }
.bsticky .btag{ display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
background:var(--s1-bg); color:var(--s1); border-radius:20px; padding:4px 11px; margin-bottom:14px; }
.bsticky .bprice{ font-family:'Inter',sans-serif; font-weight:800; font-size:32px; letter-spacing:-.03em; }
.bsticky .bvat{ font-size:12px; color:var(--ink-soft); margin-bottom:20px; display:block; }
.bendband{ background:linear-gradient(120deg,var(--forest),#12706B); border-radius:18px; padding:40px 44px; text-align:center; color:#fff; margin-top:8px; }
.bendband h2{ color:#fff; font-size:24px; margin-bottom:10px; }
.bendband p{ color:#C7D0C9; font-size:14px; max-width:560px; margin:0 auto 22px; }
.bendband .bactions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
/* ==== annual-return.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
.mega-stagelink{ display:block; border-radius:8px; margin:-6px -8px 0; padding:6px 8px; transition:background .14s; }
.mega-stagelink:hover{ background:var(--accent-bg); }
.mega-stagelink:hover .mega-name{ text-decoration:underline; }
.mega-all{ display:block !important; font-size:12px; font-weight:800; color:var(--accent) !important;
padding:8px 0 10px !important; margin-bottom:4px; border-bottom:1px solid var(--line); }
.mega-all:hover{ text-decoration:underline; }
.has-mega.suppress .mega{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Inter', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:static; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Inter', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
/* ==== s343.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
.mega-stagelink{ display:block; border-radius:8px; margin:-6px -8px 0; padding:6px 8px; transition:background .14s; }
.mega-stagelink:hover{ background:var(--accent-bg); }
.mega-stagelink:hover .mega-name{ text-decoration:underline; }
.mega-all{ display:block !important; font-size:12px; font-weight:800; color:var(--accent) !important;
padding:8px 0 10px !important; margin-bottom:4px; border-bottom:1px solid var(--line); }
.mega-all:hover{ text-decoration:underline; }
.has-mega.suppress .mega{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Inter', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:static; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Inter', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
.s5step{ display:flex; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); }
.s5step:last-child{ border-bottom:none; }
.s5step .n{ width:34px; height:34px; border-radius:10px; background:var(--s5-bg); color:var(--s5);
display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex:none; }
.s5step b{ font-size:15px; display:block; margin-bottom:5px; }
.s5step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.costtable{ width:100%; border-collapse:collapse; background:var(--white);
border:1px solid var(--line); border-radius:9px; overflow:hidden; margin-top:6px; }
.costtable th,.costtable td{ padding:12px 16px; font-size:13.5px; text-align:left; border-bottom:1px solid var(--line); }
.costtable thead th{ background:#FBFAF7; font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-soft); }
.costtable tbody tr:last-child td{ border-bottom:none; }
.costtable tr.us td{ background:var(--s5-bg); font-weight:700; }
.costtable td.amt{ text-align:right; font-family:'Inter',sans-serif; font-weight:800; letter-spacing:-0.02em; }
.turn{ background:var(--s5-bg); border:1px solid #E8CBB8; border-radius:9px; padding:16px 20px;
display:flex; gap:14px; align-items:center; margin:22px 0; }
.turn svg{ width:22px; height:22px; stroke:var(--s5); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.turn b{ font-size:14px; display:block; }
.turn span{ font-size:13px; color:var(--ink-soft); }
/* ==== shared visual system ==== */
.t-green{ background:var(--s1-bg); color:var(--s1); }
.t-blue{ background:var(--s2-bg); color:var(--s2); }
.t-amber{ background:var(--s3-bg); color:var(--s3); }
.t-violet{ background:var(--s4-bg); color:var(--s4); }
.t-rust{ background:var(--s5-bg); color:var(--s5); }
.t-teal{ background:var(--s7-bg,#E6F1F0); color:var(--s7,#12706B); }
/* horizontal timeline */
.tl{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:34px; }
.tl:before{ content:''; position:absolute; top:26px; left:11%; right:11%; height:2px;
background:linear-gradient(90deg,var(--s1) 0%,var(--s2) 45%,var(--s4) 100%); opacity:.35; }
.tlstep{ text-align:center; padding:0 12px; position:relative; }
.tlstep .dot{ width:52px; height:52px; border-radius:50%; background:var(--white);
border:2px solid var(--accent,#1F7A4D); color:var(--accent,#1F7A4D);
display:flex; align-items:center; justify-content:center; margin:0 auto 14px; position:relative; z-index:2; }
.tlstep .dot svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.6;
stroke-linecap:round; stroke-linejoin:round; }
.tlstep .day{ font-size:10px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
color:var(--accent,#1F7A4D); margin-bottom:5px; }
.tlstep b{ font-size:14px; display:block; margin-bottom:5px; }
.tlstep span{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; display:block; }
/* bar chart */
.chart{ background:var(--white); border:1px solid var(--line); border-radius:10px; padding:24px 26px; }
.bar-row{ margin-bottom:18px; }
.bar-row:last-child{ margin-bottom:0; }
.bar-lab{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; }
.bar-lab b{ font-size:13.5px; }
.bar-lab .v{ font-family:'Inter',sans-serif; font-weight:800; font-size:14px; letter-spacing:-0.02em; }
.bar-track{ height:12px; background:var(--ivory-2); border-radius:7px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:7px; }
.bar-note{ font-size:11.5px; color:var(--ink-soft); margin-top:5px; }
.s5step .n{ background:var(--s5-bg); }
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.vs{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.vscard{ background:var(--white); border:1px solid var(--line); border-radius:11px; padding:22px 24px; }
.vscard.bad{ border-color:#EDCBBC; }
.vscard.good{ border-color:#BFE2CE; }
.vshead{ font-size:11.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:6px; }
.vscard.bad .vshead{ color:var(--s5); }
.vscard.good .vshead{ color:var(--s1); }
.vstotal{ font-family:'Inter',sans-serif; font-weight:800; font-size:34px;
letter-spacing:-0.035em; line-height:1; margin-bottom:3px; }
.vscard.bad .vstotal{ color:var(--s5); }
.vscard.good .vstotal{ color:var(--s1); }
.vssub{ font-size:12px; color:var(--ink-soft); margin-bottom:18px; }
.stack{ display:flex; height:16px; border-radius:8px; overflow:hidden; background:var(--ivory-2); }
.stack i{ display:block; height:100%; }
.legend{ margin-top:14px; }
.legrow{ display:flex; align-items:center; gap:9px; font-size:12.5px; padding:5px 0; }
.legrow .sw{ width:11px; height:11px; border-radius:3px; flex:none; }
.legrow .lv{ margin-left:auto; font-weight:700; font-size:12.5px; }
.vsnote{ font-size:11.5px; color:var(--ink-soft); margin-top:16px; line-height:1.5; }
@media (max-width:980px){ .vs{ grid-template-columns:1fr; } }
.head2{ display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:start; margin-bottom:44px; }
.head2 .eyebrow{ display:block; margin-bottom:14px; }
.head2 h2{ font-size:30px; font-weight:800; letter-spacing:-.03em; margin:0; line-height:1.25; }
.head2 p{ color:var(--ink-soft); font-size:15.5px; line-height:1.7; margin:0; padding-top:30px; }
@media (max-width:980px){ .head2{ grid-template-columns:1fr; gap:16px; align-items:start; } .head2 p{ padding-top:0; } }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
/* ==== company-check.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:static; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.lead{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:660px; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cols2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.pcard:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--pc); }
.pcard .pi{ width:46px; height:46px; border-radius:13px; background:var(--pcbg); color:var(--pc);
display:block; box-sizing:border-box; padding:12px; margin-bottom:16px; }
.pcard .pi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pcard h3{ font-size:17px; margin-bottom:8px; }
.pcard p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.pcard .tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--pcbg); color:var(--pc); border-radius:5px;
padding:4px 8px; margin-bottom:12px; }
.g1{ --pc:var(--s1); --pcbg:var(--s1-bg); } .g2{ --pc:var(--s2); --pcbg:var(--s2-bg); }
.g3{ --pc:var(--s3); --pcbg:var(--s3-bg); } .g4{ --pc:var(--s4); --pcbg:var(--s4-bg); }
.g5{ --pc:var(--s5); --pcbg:var(--s5-bg); } .g6{ --pc:var(--s7); --pcbg:var(--s7-bg); }
.promise{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px 30px; }
.promise li{ list-style:none; font-size:14.5px; padding:9px 0 9px 28px; position:relative;
border-bottom:1px solid var(--line); }
.promise li:last-child{ border-bottom:none; }
.promise li:before{ content:'✓'; position:absolute; left:0; top:9px; color:var(--s1); font-weight:800; }
.kv{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.kv .ki{ width:38px; height:38px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:block; box-sizing:border-box; padding:10px; flex:none; }
.kv .ki svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kv b{ display:block; font-size:14px; margin-bottom:2px; }
.kv span{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.kv a{ color:var(--s1); font-weight:600; }
.form{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px; }
.form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.form input,.form textarea,.form select{ width:100%; border:1px solid var(--line); border-radius:8px;
padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; margin-bottom:16px;
background:var(--ivory); color:var(--ink); box-sizing:border-box; }
.form textarea{ min-height:110px; resize:vertical; }
.form .btn{ width:100%; text-align:center; padding:13px 0; }
.postlist a{ display:block; background:var(--white); border:1px solid var(--line); border-radius:12px;
padding:22px 24px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.postlist a:hover{ border-color:var(--s1); box-shadow:0 14px 30px -22px rgba(22,36,29,.4); }
.postlist .meta{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--pc,var(--s1)); margin-bottom:7px; display:block; }
.postlist b{ font-size:17px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.postlist span.ex{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.timeline2{ border-left:2px solid var(--line); padding-left:26px; margin-left:8px; }
.tl2{ position:relative; padding-bottom:26px; }
.tl2:last-child{ padding-bottom:0; }
.tl2:before{ content:''; position:absolute; left:-33px; top:4px; width:12px; height:12px;
border-radius:50%; background:var(--s1); border:3px solid var(--ivory); }
.tl2 b{ display:block; font-size:15px; margin-bottom:4px; }
.tl2 span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.note{ background:#FBF1DE; border:1px solid #EBDCB6; border-radius:10px; padding:14px 18px;
font-size:13px; color:#6B551F; }
@media (max-width:980px){ .cols3,.cols2,.cols4{ grid-template-columns:1fr; } }
.quiz{ max-width:640px; margin:0 auto; }
.qcard{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:36px 40px; }
.qprog{ display:flex; gap:6px; margin-bottom:28px; }
.qprog i{ flex:1; height:4px; border-radius:2px; background:var(--line); }
.qprog i.on{ background:var(--s1); }
.qstep{ display:none; }
.qstep.active{ display:block; }
.qstep h2{ font-size:20px; margin-bottom:22px; }
.qopt{ display:block; width:100%; text-align:left; background:var(--ivory); border:1.5px solid var(--line);
border-radius:10px; padding:15px 18px; margin-bottom:10px; font-size:14.5px; font-weight:600; color:var(--ink);
cursor:pointer; transition:border-color .15s, background .15s; font-family:'Inter',sans-serif; }
.qopt:hover{ border-color:var(--s1); background:var(--s1-bg); }
.qback{ font-size:13px; color:var(--ink-soft); font-weight:700; cursor:pointer; margin-top:6px; display:inline-block; }
.qresult{ display:none; }
.qresult.active{ display:block; }
.rescard{ border-radius:14px; padding:28px 30px; margin-bottom:14px; border:2px solid var(--rc);
background:var(--rcbg); }
.rescard .tag{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--rc); margin-bottom:8px; display:block; }
.rescard h3{ font-size:21px; margin-bottom:8px; }
.rescard p{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin-bottom:16px; }
.qrestart{ font-size:13px; color:var(--ink-soft); font-weight:700; cursor:pointer; }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
/* ==== cart.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:static; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.lead{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:660px; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cols2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.pcard:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--pc); }
.pcard .pi{ width:46px; height:46px; border-radius:13px; background:var(--pcbg); color:var(--pc);
display:block; box-sizing:border-box; padding:12px; margin-bottom:16px; }
.pcard .pi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pcard h3{ font-size:17px; margin-bottom:8px; }
.pcard p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.pcard .tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--pcbg); color:var(--pc); border-radius:5px;
padding:4px 8px; margin-bottom:12px; }
.g1{ --pc:var(--s1); --pcbg:var(--s1-bg); } .g2{ --pc:var(--s2); --pcbg:var(--s2-bg); }
.g3{ --pc:var(--s3); --pcbg:var(--s3-bg); } .g4{ --pc:var(--s4); --pcbg:var(--s4-bg); }
.g5{ --pc:var(--s5); --pcbg:var(--s5-bg); } .g6{ --pc:var(--s7); --pcbg:var(--s7-bg); }
.promise{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px 30px; }
.promise li{ list-style:none; font-size:14.5px; padding:9px 0 9px 28px; position:relative;
border-bottom:1px solid var(--line); }
.promise li:last-child{ border-bottom:none; }
.promise li:before{ content:'✓'; position:absolute; left:0; top:9px; color:var(--s1); font-weight:800; }
.kv{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.kv .ki{ width:38px; height:38px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:block; box-sizing:border-box; padding:10px; flex:none; }
.kv .ki svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kv b{ display:block; font-size:14px; margin-bottom:2px; }
.kv span{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.kv a{ color:var(--s1); font-weight:600; }
.form{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px; }
.form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.form input,.form textarea,.form select{ width:100%; border:1px solid var(--line); border-radius:8px;
padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; margin-bottom:16px;
background:var(--ivory); color:var(--ink); box-sizing:border-box; }
.form textarea{ min-height:110px; resize:vertical; }
.form .btn{ width:100%; text-align:center; padding:13px 0; }
.postlist a{ display:block; background:var(--white); border:1px solid var(--line); border-radius:12px;
padding:22px 24px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.postlist a:hover{ border-color:var(--s1); box-shadow:0 14px 30px -22px rgba(22,36,29,.4); }
.postlist .meta{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--pc,var(--s1)); margin-bottom:7px; display:block; }
.postlist b{ font-size:17px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.postlist span.ex{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.timeline2{ border-left:2px solid var(--line); padding-left:26px; margin-left:8px; }
.tl2{ position:relative; padding-bottom:26px; }
.tl2:last-child{ padding-bottom:0; }
.tl2:before{ content:''; position:absolute; left:-33px; top:4px; width:12px; height:12px;
border-radius:50%; background:var(--s1); border:3px solid var(--ivory); }
.tl2 b{ display:block; font-size:15px; margin-bottom:4px; }
.tl2 span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.note{ background:#FBF1DE; border:1px solid #EBDCB6; border-radius:10px; padding:14px 18px;
font-size:13px; color:#6B551F; }
@media (max-width:980px){ .cols3,.cols2,.cols4{ grid-template-columns:1fr; } }
.cartwrap{ display:grid; grid-template-columns:1fr 340px; gap:40px; align-items:start; }
.cartline{ display:flex; align-items:center; gap:18px; background:var(--white); border:1px solid var(--line);
border-radius:12px; padding:18px 20px; margin-bottom:12px; }
.cartline .ci-icon{ width:42px; height:42px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; flex:none; }
.cartline .ci-icon svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cartline .ci-info{ flex:1; }
.cartline .ci-info b{ font-size:14.5px; display:block; margin-bottom:2px; }
.cartline .ci-info span{ font-size:12px; color:var(--ink-soft); }
.cartline .ci-qty{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:8px; padding:4px; }
.cartline .ci-qty button{ width:24px; height:24px; border:none; background:var(--ivory); border-radius:5px;
font-weight:800; color:var(--ink); cursor:pointer; font-size:14px; }
.cartline .ci-qty span{ font-size:13px; font-weight:700; min-width:16px; text-align:center; }
.cartline .ci-price{ font-family:'Inter',sans-serif; font-weight:800; font-size:15px; min-width:80px; text-align:right; }
.cartline .ci-remove{ background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:18px; padding:0 4px; }
.cartline .ci-remove:hover{ color:#C25630; }
.cartempty{ background:var(--white); border:1px dashed var(--line); border-radius:14px; padding:60px 30px; text-align:center; }
.cartempty svg{ width:52px; height:52px; stroke:var(--ink-soft); fill:none; stroke-width:1.5; margin-bottom:16px; }
.cartempty p{ color:var(--ink-soft); font-size:14px; margin-bottom:20px; }
.cartsum{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:26px 28px; position:static; }
.cartsum h3{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:16px; }
.cartsum .row{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--ink-soft); padding:6px 0; }
.cartsum .total{ display:flex; justify-content:space-between; align-items:baseline; border-top:2px solid var(--ink);
margin-top:12px; padding-top:14px; }
.cartsum .total b{ font-size:13px; }
.cartsum .total .tv{ font-family:'Inter',sans-serif; font-weight:800; font-size:24px; letter-spacing:-.03em; }
.cartsum .vatnote{ font-size:11px; color:var(--ink-soft); margin-top:8px; }
.cartclear{ font-size:12.5px; color:var(--ink-soft); font-weight:700; cursor:pointer; }
.cartclear:hover{ color:#C25630; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
/* ==== checkout.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:sticky; top:24px; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.lead{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:660px; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cols2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.pcard:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--pc); }
.pcard .pi{ width:46px; height:46px; border-radius:13px; background:var(--pcbg); color:var(--pc);
display:block; box-sizing:border-box; padding:12px; margin-bottom:16px; }
.pcard .pi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pcard h3{ font-size:17px; margin-bottom:8px; }
.pcard p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.pcard .tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--pcbg); color:var(--pc); border-radius:5px;
padding:4px 8px; margin-bottom:12px; }
.g1{ --pc:var(--s1); --pcbg:var(--s1-bg); } .g2{ --pc:var(--s2); --pcbg:var(--s2-bg); }
.g3{ --pc:var(--s3); --pcbg:var(--s3-bg); } .g4{ --pc:var(--s4); --pcbg:var(--s4-bg); }
.g5{ --pc:var(--s5); --pcbg:var(--s5-bg); } .g6{ --pc:var(--s7); --pcbg:var(--s7-bg); }
.promise{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px 30px; }
.promise li{ list-style:none; font-size:14.5px; padding:9px 0 9px 28px; position:relative;
border-bottom:1px solid var(--line); }
.promise li:last-child{ border-bottom:none; }
.promise li:before{ content:'✓'; position:absolute; left:0; top:9px; color:var(--s1); font-weight:800; }
.kv{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.kv .ki{ width:38px; height:38px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:block; box-sizing:border-box; padding:10px; flex:none; }
.kv .ki svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kv b{ display:block; font-size:14px; margin-bottom:2px; }
.kv span{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.kv a{ color:var(--s1); font-weight:600; }
.form{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px; }
.form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.form input,.form textarea,.form select{ width:100%; border:1px solid var(--line); border-radius:8px;
padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; margin-bottom:16px;
background:var(--ivory); color:var(--ink); box-sizing:border-box; }
.form textarea{ min-height:110px; resize:vertical; }
.form .btn{ width:100%; text-align:center; padding:13px 0; }
.postlist a{ display:block; background:var(--white); border:1px solid var(--line); border-radius:12px;
padding:22px 24px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.postlist a:hover{ border-color:var(--s1); box-shadow:0 14px 30px -22px rgba(22,36,29,.4); }
.postlist .meta{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--pc,var(--s1)); margin-bottom:7px; display:block; }
.postlist b{ font-size:17px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.postlist span.ex{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.timeline2{ border-left:2px solid var(--line); padding-left:26px; margin-left:8px; }
.tl2{ position:relative; padding-bottom:26px; }
.tl2:last-child{ padding-bottom:0; }
.tl2:before{ content:''; position:absolute; left:-33px; top:4px; width:12px; height:12px;
border-radius:50%; background:var(--s1); border:3px solid var(--ivory); }
.tl2 b{ display:block; font-size:15px; margin-bottom:4px; }
.tl2 span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.note{ background:#FBF1DE; border:1px solid #EBDCB6; border-radius:10px; padding:14px 18px;
font-size:13px; color:#6B551F; }
@media (max-width:980px){ .cols3,.cols2,.cols4{ grid-template-columns:1fr; } }
.checkoutgrid{ display:grid; grid-template-columns:1fr 340px; gap:40px; align-items:start; }
.cksection{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:26px 28px; margin-bottom:20px; }
.cksection h2{ font-size:15px; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.cksection .ckn{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.ckrow{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ckrow.full{ grid-template-columns:1fr; }
.paymethods{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:6px; }
.paymethod{ border:1.5px solid var(--line); border-radius:10px; padding:13px 14px; display:flex; align-items:center; gap:10px;
cursor:pointer; font-size:13px; font-weight:600; }
.paymethod input{ width:auto; margin:0; }
.paymethod:has(input:checked){ border-color:var(--s1); background:var(--s1-bg); }
.cktotal{ display:flex; justify-content:space-between; font-size:13px; color:var(--ink-soft); padding:6px 0; }
.cktotal.grand{ border-top:2px solid var(--ink); margin-top:10px; padding-top:14px; font-size:14px; color:var(--ink); font-weight:700; }
.cktotal.grand .tv{ font-family:'Inter',sans-serif; font-weight:800; font-size:22px; letter-spacing:-.03em; }
.ckitem{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft); padding:5px 0; }
.ckterms{ display:flex; gap:9px; align-items:flex-start; font-size:12px; color:var(--ink-soft); margin:16px 0; line-height:1.5; }
.ckterms input{ width:auto; margin-top:2px; }
.ckterms a{ color:var(--s1); font-weight:600; }
.ckempty{ background:var(--white); border:1px dashed var(--line); border-radius:14px; padding:60px 30px; text-align:center; }
@media (max-width:980px){ .checkoutgrid{ grid-template-columns:1fr; } .ckrow{ grid-template-columns:1fr; } }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
/* ==== for-accountants.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
.mega-stagelink{ display:block; border-radius:8px; margin:-6px -8px 0; padding:6px 8px; transition:background .14s; }
.mega-stagelink:hover{ background:var(--accent-bg); }
.mega-stagelink:hover .mega-name{ text-decoration:underline; }
.mega-all{ display:block !important; font-size:12px; font-weight:800; color:var(--accent) !important;
padding:8px 0 10px !important; margin-bottom:4px; border-bottom:1px solid var(--line); }
.mega-all:hover{ text-decoration:underline; }
.has-mega.suppress .mega{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Inter', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:static; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Inter', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.lead{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:660px; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cols2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.pcard:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--pc); }
.pcard .pi{ width:46px; height:46px; border-radius:13px; background:var(--pcbg); color:var(--pc);
display:block; box-sizing:border-box; padding:12px; margin-bottom:16px; }
.pcard .pi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pcard h3{ font-size:17px; margin-bottom:8px; }
.pcard p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.pcard .tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--pcbg); color:var(--pc); border-radius:5px;
padding:4px 8px; margin-bottom:12px; }
.g1{ --pc:var(--s1); --pcbg:var(--s1-bg); } .g2{ --pc:var(--s2); --pcbg:var(--s2-bg); }
.g3{ --pc:var(--s3); --pcbg:var(--s3-bg); } .g4{ --pc:var(--s4); --pcbg:var(--s4-bg); }
.g5{ --pc:var(--s5); --pcbg:var(--s5-bg); } .g6{ --pc:var(--s7); --pcbg:var(--s7-bg); }
.promise{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px 30px; }
.promise li{ list-style:none; font-size:14.5px; padding:9px 0 9px 28px; position:relative;
border-bottom:1px solid var(--line); }
.promise li:last-child{ border-bottom:none; }
.promise li:before{ content:'✓'; position:absolute; left:0; top:9px; color:var(--s1); font-weight:800; }
.kv{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.kv .ki{ width:38px; height:38px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:block; box-sizing:border-box; padding:10px; flex:none; }
.kv .ki svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kv b{ display:block; font-size:14px; margin-bottom:2px; }
.kv span{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.kv a{ color:var(--s1); font-weight:600; }
.form{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px; }
.form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.form input,.form textarea,.form select{ width:100%; border:1px solid var(--line); border-radius:8px;
padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; margin-bottom:16px;
background:var(--ivory); color:var(--ink); box-sizing:border-box; }
.form textarea{ min-height:110px; resize:vertical; }
.form .btn{ width:100%; text-align:center; padding:13px 0; }
.postlist a{ display:block; background:var(--white); border:1px solid var(--line); border-radius:12px;
padding:22px 24px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.postlist a:hover{ border-color:var(--s1); box-shadow:0 14px 30px -22px rgba(22,36,29,.4); }
.postlist .meta{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--pc,var(--s1)); margin-bottom:7px; display:block; }
.postlist b{ font-size:17px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.postlist span.ex{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.timeline2{ border-left:2px solid var(--line); padding-left:26px; margin-left:8px; }
.tl2{ position:relative; padding-bottom:26px; }
.tl2:last-child{ padding-bottom:0; }
.tl2:before{ content:''; position:absolute; left:-33px; top:4px; width:12px; height:12px;
border-radius:50%; background:var(--s1); border:3px solid var(--ivory); }
.tl2 b{ display:block; font-size:15px; margin-bottom:4px; }
.tl2 span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.note{ background:#FBF1DE; border:1px solid #EBDCB6; border-radius:10px; padding:14px 18px;
font-size:13px; color:#6B551F; }
@media (max-width:980px){ .cols3,.cols2,.cols4{ grid-template-columns:1fr; } }
.head2{ display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:start; margin-bottom:44px; }
.head2 .eyebrow{ display:block; margin-bottom:14px; }
.head2 h2{ font-size:30px; font-weight:800; letter-spacing:-.03em; margin:0; line-height:1.25; }
.head2 p{ color:var(--ink-soft); font-size:15.5px; line-height:1.7; margin:0; padding-top:30px; }
@media (max-width:980px){ .head2{ grid-template-columns:1fr; gap:16px; align-items:start; } .head2 p{ padding-top:0; } }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
/* ==== blog.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
.mega-stagelink{ display:block; border-radius:8px; margin:-6px -8px 0; padding:6px 8px; transition:background .14s; }
.mega-stagelink:hover{ background:var(--accent-bg); }
.mega-stagelink:hover .mega-name{ text-decoration:underline; }
.mega-all{ display:block !important; font-size:12px; font-weight:800; color:var(--accent) !important;
padding:8px 0 10px !important; margin-bottom:4px; border-bottom:1px solid var(--line); }
.mega-all:hover{ text-decoration:underline; }
.has-mega.suppress .mega{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Inter', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:static; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Inter', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.lead{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:660px; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cols2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.pcard:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--pc); }
.pcard .pi{ width:46px; height:46px; border-radius:13px; background:var(--pcbg); color:var(--pc);
display:block; box-sizing:border-box; padding:12px; margin-bottom:16px; }
.pcard .pi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pcard h3{ font-size:17px; margin-bottom:8px; }
.pcard p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.pcard .tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--pcbg); color:var(--pc); border-radius:5px;
padding:4px 8px; margin-bottom:12px; }
.g1{ --pc:var(--s1); --pcbg:var(--s1-bg); } .g2{ --pc:var(--s2); --pcbg:var(--s2-bg); }
.g3{ --pc:var(--s3); --pcbg:var(--s3-bg); } .g4{ --pc:var(--s4); --pcbg:var(--s4-bg); }
.g5{ --pc:var(--s5); --pcbg:var(--s5-bg); } .g6{ --pc:var(--s7); --pcbg:var(--s7-bg); }
.promise{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px 30px; }
.promise li{ list-style:none; font-size:14.5px; padding:9px 0 9px 28px; position:relative;
border-bottom:1px solid var(--line); }
.promise li:last-child{ border-bottom:none; }
.promise li:before{ content:'✓'; position:absolute; left:0; top:9px; color:var(--s1); font-weight:800; }
.kv{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.kv .ki{ width:38px; height:38px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:block; box-sizing:border-box; padding:10px; flex:none; }
.kv .ki svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kv b{ display:block; font-size:14px; margin-bottom:2px; }
.kv span{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.kv a{ color:var(--s1); font-weight:600; }
.form{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px; }
.form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.form input,.form textarea,.form select{ width:100%; border:1px solid var(--line); border-radius:8px;
padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; margin-bottom:16px;
background:var(--ivory); color:var(--ink); box-sizing:border-box; }
.form textarea{ min-height:110px; resize:vertical; }
.form .btn{ width:100%; text-align:center; padding:13px 0; }
.postlist a{ display:block; background:var(--white); border:1px solid var(--line); border-radius:12px;
padding:22px 24px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.postlist a:hover{ border-color:var(--s1); box-shadow:0 14px 30px -22px rgba(22,36,29,.4); }
.postlist .meta{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--pc,var(--s1)); margin-bottom:7px; display:block; }
.postlist b{ font-size:17px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.postlist span.ex{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.timeline2{ border-left:2px solid var(--line); padding-left:26px; margin-left:8px; }
.tl2{ position:relative; padding-bottom:26px; }
.tl2:last-child{ padding-bottom:0; }
.tl2:before{ content:''; position:absolute; left:-33px; top:4px; width:12px; height:12px;
border-radius:50%; background:var(--s1); border:3px solid var(--ivory); }
.tl2 b{ display:block; font-size:15px; margin-bottom:4px; }
.tl2 span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.note{ background:#FBF1DE; border:1px solid #EBDCB6; border-radius:10px; padding:14px 18px;
font-size:13px; color:#6B551F; }
@media (max-width:980px){ .cols3,.cols2,.cols4{ grid-template-columns:1fr; } }
.postgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pc{ background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden;
display:flex; flex-direction:column; transition:box-shadow .18s, transform .18s, border-color .18s; }
.pc:hover{ box-shadow:0 20px 42px -26px rgba(22,36,29,.42); transform:translateY(-3px); border-color:var(--pc); }
.pc .strip{ height:5px; background:linear-gradient(90deg,var(--pc),var(--pc2)); }
.pc .in{ padding:24px; display:flex; flex-direction:column; flex:1; }
.pc .cat{ font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
color:var(--pc); background:var(--pcbg); border-radius:5px; padding:4px 9px; align-self:flex-start; margin-bottom:13px; }
.pc h3{ font-size:17.5px; line-height:1.3; margin-bottom:9px; letter-spacing:-.02em; }
.pc p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; flex:1; }
.pc .meta{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
font-size:11.5px; color:var(--ink-soft); display:flex; justify-content:space-between; }
.pc .meta b{ color:var(--pc); font-weight:700; }
.b1{ --pc:#1E8A55; --pc2:#2FB273; --pcbg:#E4F3EA; }
.b2{ --pc:#2A6FB0; --pc2:#4B95D6; --pcbg:#E6EFF9; }
.b3{ --pc:#C9871A; --pc2:#E5A83E; --pcbg:#FBF1DE; }
.b4{ --pc:#7A55A8; --pc2:#9C78C9; --pcbg:#F1EAFA; }
.b5{ --pc:#C25630; --pc2:#DE7A52; --pcbg:#FBEBE3; }
.b6{ --pc:#0E8A80; --pc2:#22ADA2; --pcbg:#E1F2F0; }
.article{ max-width:720px; }
.article h2{ font-size:23px; margin:34px 0 12px; }
.article h3{ font-size:18px; margin:26px 0 10px; }
.article p{ font-size:15.5px; line-height:1.8; color:var(--ink-soft); margin-bottom:15px; }
.article ul{ margin:0 0 18px 0; }
.article li{ list-style:none; font-size:15.5px; line-height:1.75; color:var(--ink-soft);
padding:5px 0 5px 24px; position:relative; }
.article li:before{ content:''; position:absolute; left:2px; top:14px; width:6px; height:6px;
border-radius:50%; background:var(--pc,#1E8A55); }
.article .example{ background:var(--white); border:1px solid var(--line); border-left:4px solid var(--pc,#1E8A55);
border-radius:0 12px 12px 0; padding:22px 26px; margin:26px 0; }
.article .example h2,.article .example h3{ margin-top:0; font-size:17px; }
.article .example p:last-child{ margin-bottom:0; }
.article .checklist{ background:var(--pcbg,#E4F3EA); border-radius:12px; padding:22px 26px; margin:26px 0; }
.article .checklist li:before{ content:'✓'; background:none; width:auto; height:auto; top:5px;
color:var(--pc,#1E8A55); font-weight:800; }
.byline{ display:flex; align-items:center; gap:12px; padding:18px 0 26px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.byline .av{ width:40px; height:40px; border-radius:50%; background:linear-gradient(140deg,#1E8A55,#2FB273);
color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex:none; }
.byline b{ font-size:13.5px; display:block; }
.byline span{ font-size:12px; color:var(--ink-soft); }
.relposts{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
@media (max-width:980px){ .postgrid,.relposts{ grid-template-columns:1fr; } }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
/* ==== guides.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
.mega-stagelink{ display:block; border-radius:8px; margin:-6px -8px 0; padding:6px 8px; transition:background .14s; }
.mega-stagelink:hover{ background:var(--accent-bg); }
.mega-stagelink:hover .mega-name{ text-decoration:underline; }
.mega-all{ display:block !important; font-size:12px; font-weight:800; color:var(--accent) !important;
padding:8px 0 10px !important; margin-bottom:4px; border-bottom:1px solid var(--line); }
.mega-all:hover{ text-decoration:underline; }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Inter', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:static; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Inter', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.lead{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:660px; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cols2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.pcard:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--pc); }
.pcard .pi{ width:46px; height:46px; border-radius:13px; background:var(--pcbg); color:var(--pc);
display:block; box-sizing:border-box; padding:12px; margin-bottom:16px; }
.pcard .pi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pcard h3{ font-size:17px; margin-bottom:8px; }
.pcard p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.pcard .tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--pcbg); color:var(--pc); border-radius:5px;
padding:4px 8px; margin-bottom:12px; }
.g1{ --pc:var(--s1); --pcbg:var(--s1-bg); } .g2{ --pc:var(--s2); --pcbg:var(--s2-bg); }
.g3{ --pc:var(--s3); --pcbg:var(--s3-bg); } .g4{ --pc:var(--s4); --pcbg:var(--s4-bg); }
.g5{ --pc:var(--s5); --pcbg:var(--s5-bg); } .g6{ --pc:var(--s7); --pcbg:var(--s7-bg); }
.promise{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px 30px; }
.promise li{ list-style:none; font-size:14.5px; padding:9px 0 9px 28px; position:relative;
border-bottom:1px solid var(--line); }
.promise li:last-child{ border-bottom:none; }
.promise li:before{ content:'✓'; position:absolute; left:0; top:9px; color:var(--s1); font-weight:800; }
.kv{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.kv .ki{ width:38px; height:38px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:block; box-sizing:border-box; padding:10px; flex:none; }
.kv .ki svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kv b{ display:block; font-size:14px; margin-bottom:2px; }
.kv span{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.kv a{ color:var(--s1); font-weight:600; }
.form{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px; }
.form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.form input,.form textarea,.form select{ width:100%; border:1px solid var(--line); border-radius:8px;
padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; margin-bottom:16px;
background:var(--ivory); color:var(--ink); box-sizing:border-box; }
.form textarea{ min-height:110px; resize:vertical; }
.form .btn{ width:100%; text-align:center; padding:13px 0; }
.postlist a{ display:block; background:var(--white); border:1px solid var(--line); border-radius:12px;
padding:22px 24px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.postlist a:hover{ border-color:var(--s1); box-shadow:0 14px 30px -22px rgba(22,36,29,.4); }
.postlist .meta{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--pc,var(--s1)); margin-bottom:7px; display:block; }
.postlist b{ font-size:17px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.postlist span.ex{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.timeline2{ border-left:2px solid var(--line); padding-left:26px; margin-left:8px; }
.tl2{ position:relative; padding-bottom:26px; }
.tl2:last-child{ padding-bottom:0; }
.tl2:before{ content:''; position:absolute; left:-33px; top:4px; width:12px; height:12px;
border-radius:50%; background:var(--s1); border:3px solid var(--ivory); }
.tl2 b{ display:block; font-size:15px; margin-bottom:4px; }
.tl2 span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.note{ background:#FBF1DE; border:1px solid #EBDCB6; border-radius:10px; padding:14px 18px;
font-size:13px; color:#6B551F; }
@media (max-width:980px){ .cols3,.cols2,.cols4{ grid-template-columns:1fr; } }
.gsteps{ counter-reset:gstep; }
.gstep{ display:grid; grid-template-columns:56px 1fr; gap:20px; padding:24px 0; border-bottom:1px solid var(--line); }
.gstep:last-child{ border-bottom:none; }
.gstep .gn{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
font-family:'Inter',sans-serif; font-weight:800; font-size:16px; color:#fff;
background:linear-gradient(140deg,var(--gc),var(--gc2)); box-shadow:0 6px 14px -6px var(--gc); }
.gstep b{ font-size:16px; display:block; margin-bottom:6px; }
.gstep p{ font-size:14px; color:var(--ink-soft); line-height:1.7; margin-bottom:8px; }
.gstep .gtip{ background:var(--gcbg); border-radius:8px; padding:10px 14px; font-size:12.5px;
color:var(--ink); display:flex; gap:8px; align-items:flex-start; margin-top:8px; }
.gstep .gtip svg{ width:15px; height:15px; stroke:var(--gc); fill:none; stroke-width:2; flex:none; margin-top:1px; }
.gcard{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:32px; margin-bottom:22px; }
.ghead{ display:flex; align-items:center; gap:16px; margin-bottom:6px; }
.ghead .gi{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
color:#fff; background:linear-gradient(140deg,var(--gc),var(--gc2)); box-shadow:0 8px 18px -8px var(--gc); flex:none; }
.ghead .gi svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ghead h2{ font-size:22px; margin:0; }
.ghead .gmeta{ font-size:12px; color:var(--ink-soft); margin-top:3px; }
.g1{ --gc:#1E8A55; --gc2:#2FB273; --gcbg:#E4F3EA; } .g2{ --gc:#2A6FB0; --gc2:#4B95D6; --gcbg:#E6EFF9; }
.g3{ --gc:#C9871A; --gc2:#E5A83E; --gcbg:#FBF1DE; } .g5{ --gc:#C25630; --gc2:#DE7A52; --gcbg:#FBEBE3; }
.gnav{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:30px; }
.gnav a{ font-size:13px; font-weight:700; border:1px solid var(--line); border-radius:20px; padding:8px 16px; color:var(--ink-soft); }
.gnav a:hover{ border-color:var(--s2); color:var(--s2); }
.gtop{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.gmeter{ display:flex; align-items:center; gap:10px; }
.gmeter .dot{ width:9px; height:9px; border-radius:50%; background:var(--line); }
.gmeter .dot.on{ background:var(--gc); }
.gillus{ background:var(--gcbg); border-radius:14px; padding:22px 26px; margin-bottom:24px;
display:flex; align-items:center; gap:20px; }
.gillus svg{ width:74px; height:74px; flex:none; }
.gillus p{ font-size:13.5px; color:var(--ink); line-height:1.6; margin:0; }
.gillus b{ color:var(--gc); }
.gtimeline{ position:relative; padding-left:26px; margin-top:6px; }
.gtimeline:before{ content:''; position:absolute; left:21px; top:8px; bottom:8px; width:2px;
background:linear-gradient(180deg,var(--gc),transparent); }
.gstep{ display:grid; grid-template-columns:44px 1fr; gap:20px; padding:20px 0; border-bottom:none; position:relative; }
.gstep .gn{ position:relative; z-index:1; box-shadow:0 0 0 6px var(--white); }
.gcheck{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.gcheck span{ font-size:11.5px; font-weight:700; background:var(--gcbg); color:var(--gc);
border-radius:20px; padding:5px 12px; }
.gwarn{ background:#FBF1DE; border:1px solid #EBDCB6; border-radius:9px; padding:11px 15px;
font-size:12.5px; color:#6B551F; margin-top:10px; display:flex; gap:9px; align-items:flex-start; }
.gwarn svg{ width:15px; height:15px; stroke:#C9871A; flex:none; margin-top:1px; }
/* overview grid */
.goverview{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:48px; }
.gocard{ border-radius:16px; padding:22px; display:flex; flex-direction:column; text-decoration:none;
background:var(--gcbg2); border:1px solid var(--gcbd); transition:transform .18s, box-shadow .18s; }
.gocard:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -22px var(--gc2); }
.gocard .goi{ width:52px; height:52px; margin-bottom:16px; }
.gocard .goi svg{ width:100%; height:100%; }
.gocard b{ font-size:15.5px; color:var(--ink); display:block; margin-bottom:6px; letter-spacing:-.01em; }
.gocard span.gd{ font-size:12px; color:var(--ink-soft); line-height:1.5; flex:1; margin-bottom:14px; }
.gocard .gometa{ display:flex; gap:6px; flex-wrap:wrap; }
.gocard .gometa em{ font-style:normal; font-size:10px; font-weight:800; background:#fff; color:var(--gc2);
border-radius:20px; padding:4px 9px; }
.go1{ --gcbg2:#EAF6EF; --gcbd:#CBE9D6; --gc2:#1E8A55; }
.go2{ --gcbg2:#EAF2FA; --gcbd:#CBDFF3; --gc2:#2A6FB0; }
.go3{ --gcbg2:#FCF3E4; --gcbd:#F1DEB2; --gc2:#C9871A; }
.go4{ --gcbg2:#FBEDE7; --gcbd:#F0CFC0; --gc2:#C25630; }
/* redesigned guide card */
.gcard{ padding:0; overflow:hidden; }
.gband{ padding:30px 32px 26px; background:linear-gradient(120deg,var(--gc),var(--gc2)); position:relative; }
.gband:before{ content:''; position:absolute; right:-40px; top:-60px; width:220px; height:220px;
border-radius:50%; background:rgba(255,255,255,.08); }
.gband .gtag{ position:relative; z-index:1; display:inline-block; font-size:10.5px; font-weight:800;
letter-spacing:.09em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.18);
border-radius:20px; padding:4px 11px; margin-bottom:12px; }
.gband h2{ position:relative; z-index:1; color:#fff; font-size:24px; margin:0 0 6px; letter-spacing:-.02em; }
.gband .gmeta2{ position:relative; z-index:1; color:rgba(255,255,255,.85); font-size:12.5px; }
.gbody{ padding:30px 32px 32px; }
.gfacts{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:28px; }
.gfact{ background:var(--gcbg); border-radius:10px; padding:14px 16px; text-align:center; }
.gfact b{ display:block; font-family:'Inter',sans-serif; font-weight:800; font-size:19px;
color:var(--gc); letter-spacing:-.02em; margin-bottom:3px; }
.gfact span{ font-size:10.5px; color:var(--ink-soft); line-height:1.35; display:block; }
.gsub{ font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);
margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.gend{ margin-top:8px; display:flex; align-items:center; justify-content:space-between; gap:16px;
background:var(--gcbg); border-radius:12px; padding:16px 20px; }
.gend span{ font-size:13px; color:var(--ink); }
.gend a{ font-size:12.5px; font-weight:800; color:#fff; background:var(--gc); border-radius:20px;
padding:9px 16px; white-space:nowrap; }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
/* ==== faq.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
.mega-stagelink{ display:block; border-radius:8px; margin:-6px -8px 0; padding:6px 8px; transition:background .14s; }
.mega-stagelink:hover{ background:var(--accent-bg); }
.mega-stagelink:hover .mega-name{ text-decoration:underline; }
.mega-all{ display:block !important; font-size:12px; font-weight:800; color:var(--accent) !important;
padding:8px 0 10px !important; margin-bottom:4px; border-bottom:1px solid var(--line); }
.mega-all:hover{ text-decoration:underline; }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:static; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.lead{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:660px; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cols2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.pcard:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--pc); }
.pcard .pi{ width:46px; height:46px; border-radius:13px; background:var(--pcbg); color:var(--pc);
display:block; box-sizing:border-box; padding:12px; margin-bottom:16px; }
.pcard .pi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pcard h3{ font-size:17px; margin-bottom:8px; }
.pcard p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.pcard .tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--pcbg); color:var(--pc); border-radius:5px;
padding:4px 8px; margin-bottom:12px; }
.g1{ --pc:var(--s1); --pcbg:var(--s1-bg); } .g2{ --pc:var(--s2); --pcbg:var(--s2-bg); }
.g3{ --pc:var(--s3); --pcbg:var(--s3-bg); } .g4{ --pc:var(--s4); --pcbg:var(--s4-bg); }
.g5{ --pc:var(--s5); --pcbg:var(--s5-bg); } .g6{ --pc:var(--s7); --pcbg:var(--s7-bg); }
.promise{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px 30px; }
.promise li{ list-style:none; font-size:14.5px; padding:9px 0 9px 28px; position:relative;
border-bottom:1px solid var(--line); }
.promise li:last-child{ border-bottom:none; }
.promise li:before{ content:'✓'; position:absolute; left:0; top:9px; color:var(--s1); font-weight:800; }
.kv{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.kv .ki{ width:38px; height:38px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:block; box-sizing:border-box; padding:10px; flex:none; }
.kv .ki svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kv b{ display:block; font-size:14px; margin-bottom:2px; }
.kv span{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.kv a{ color:var(--s1); font-weight:600; }
.form{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px; }
.form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.form input,.form textarea,.form select{ width:100%; border:1px solid var(--line); border-radius:8px;
padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; margin-bottom:16px;
background:var(--ivory); color:var(--ink); box-sizing:border-box; }
.form textarea{ min-height:110px; resize:vertical; }
.form .btn{ width:100%; text-align:center; padding:13px 0; }
.postlist a{ display:block; background:var(--white); border:1px solid var(--line); border-radius:12px;
padding:22px 24px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.postlist a:hover{ border-color:var(--s1); box-shadow:0 14px 30px -22px rgba(22,36,29,.4); }
.postlist .meta{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--pc,var(--s1)); margin-bottom:7px; display:block; }
.postlist b{ font-size:17px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.postlist span.ex{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.timeline2{ border-left:2px solid var(--line); padding-left:26px; margin-left:8px; }
.tl2{ position:relative; padding-bottom:26px; }
.tl2:last-child{ padding-bottom:0; }
.tl2:before{ content:''; position:absolute; left:-33px; top:4px; width:12px; height:12px;
border-radius:50%; background:var(--s1); border:3px solid var(--ivory); }
.tl2 b{ display:block; font-size:15px; margin-bottom:4px; }
.tl2 span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.note{ background:#FBF1DE; border:1px solid #EBDCB6; border-radius:10px; padding:14px 18px;
font-size:13px; color:#6B551F; }
@media (max-width:980px){ .cols3,.cols2,.cols4{ grid-template-columns:1fr; } }
.faqcat{ margin-bottom:8px; }
.faqcathead{ display:flex; align-items:center; gap:12px; margin:40px 0 16px; }
.faqcathead:first-child{ margin-top:0; }
.faqcathead .fi{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
color:#fff; flex:none; background:linear-gradient(140deg,var(--fc),var(--fc2)); box-shadow:0 6px 13px -6px var(--fc); }
.faqcathead .fi svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.faqcathead h2{ font-size:19px; margin:0; }
.faqlist details{ background:var(--white); border:1px solid var(--line); border-radius:10px; padding:16px 20px; margin-bottom:9px; }
.faqlist summary{ font-size:14.5px; font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center; }
.faqlist summary::-webkit-details-marker{ display:none; }
.faqlist summary:after{ content:'+'; color:var(--fc,var(--s1)); font-weight:800; font-size:18px; flex:none; }
.faqlist details[open] summary:after{ content:'\2013'; }
.faqlist details[open]{ border-color:var(--fc,var(--s1)); }
.faqlist p{ margin-top:11px; font-size:13.5px; color:var(--ink-soft); line-height:1.7; }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
/* ==== deadlines.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
.mega-stagelink{ display:block; border-radius:8px; margin:-6px -8px 0; padding:6px 8px; transition:background .14s; }
.mega-stagelink:hover{ background:var(--accent-bg); }
.mega-stagelink:hover .mega-name{ text-decoration:underline; }
.mega-all{ display:block !important; font-size:12px; font-weight:800; color:var(--accent) !important;
padding:8px 0 10px !important; margin-bottom:4px; border-bottom:1px solid var(--line); }
.mega-all:hover{ text-decoration:underline; }
.has-mega.suppress .mega{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Inter', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:static; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Inter', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.lead{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:660px; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cols2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.pcard:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--pc); }
.pcard .pi{ width:46px; height:46px; border-radius:13px; background:var(--pcbg); color:var(--pc);
display:block; box-sizing:border-box; padding:12px; margin-bottom:16px; }
.pcard .pi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pcard h3{ font-size:17px; margin-bottom:8px; }
.pcard p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.pcard .tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--pcbg); color:var(--pc); border-radius:5px;
padding:4px 8px; margin-bottom:12px; }
.g1{ --pc:var(--s1); --pcbg:var(--s1-bg); } .g2{ --pc:var(--s2); --pcbg:var(--s2-bg); }
.g3{ --pc:var(--s3); --pcbg:var(--s3-bg); } .g4{ --pc:var(--s4); --pcbg:var(--s4-bg); }
.g5{ --pc:var(--s5); --pcbg:var(--s5-bg); } .g6{ --pc:var(--s7); --pcbg:var(--s7-bg); }
.promise{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px 30px; }
.promise li{ list-style:none; font-size:14.5px; padding:9px 0 9px 28px; position:relative;
border-bottom:1px solid var(--line); }
.promise li:last-child{ border-bottom:none; }
.promise li:before{ content:'✓'; position:absolute; left:0; top:9px; color:var(--s1); font-weight:800; }
.kv{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.kv .ki{ width:38px; height:38px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:block; box-sizing:border-box; padding:10px; flex:none; }
.kv .ki svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kv b{ display:block; font-size:14px; margin-bottom:2px; }
.kv span{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.kv a{ color:var(--s1); font-weight:600; }
.form{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px; }
.form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.form input,.form textarea,.form select{ width:100%; border:1px solid var(--line); border-radius:8px;
padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; margin-bottom:16px;
background:var(--ivory); color:var(--ink); box-sizing:border-box; }
.form textarea{ min-height:110px; resize:vertical; }
.form .btn{ width:100%; text-align:center; padding:13px 0; }
.postlist a{ display:block; background:var(--white); border:1px solid var(--line); border-radius:12px;
padding:22px 24px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.postlist a:hover{ border-color:var(--s1); box-shadow:0 14px 30px -22px rgba(22,36,29,.4); }
.postlist .meta{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--pc,var(--s1)); margin-bottom:7px; display:block; }
.postlist b{ font-size:17px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.postlist span.ex{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.timeline2{ border-left:2px solid var(--line); padding-left:26px; margin-left:8px; }
.tl2{ position:relative; padding-bottom:26px; }
.tl2:last-child{ padding-bottom:0; }
.tl2:before{ content:''; position:absolute; left:-33px; top:4px; width:12px; height:12px;
border-radius:50%; background:var(--s1); border:3px solid var(--ivory); }
.tl2 b{ display:block; font-size:15px; margin-bottom:4px; }
.tl2 span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.note{ background:#FBF1DE; border:1px solid #EBDCB6; border-radius:10px; padding:14px 18px;
font-size:13px; color:#6B551F; }
@media (max-width:980px){ .cols3,.cols2,.cols4{ grid-template-columns:1fr; } }
.dwrap{ background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.dtable{ width:100%; border-collapse:collapse; table-layout:fixed; }
.dtable colgroup col.c1{ width:21%; } .dtable colgroup col.c2{ width:15%; }
.dtable colgroup col.c3{ width:17%; } .dtable colgroup col.c4{ width:17%; } .dtable colgroup col.c5{ width:30%; }
.dtable th,.dtable td{ padding:16px 18px; text-align:left; font-size:13px; line-height:1.55;
border-bottom:1px solid var(--line); vertical-align:top; word-wrap:break-word; }
.dtable thead th{ background:var(--forest); color:#fff; font-family:'Inter',sans-serif;
font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:700; padding:14px 18px; }
.dtable tbody tr:nth-child(even){ background:#FBFAF7; }
.dtable tbody tr:last-child td{ border-bottom:none; }
.dtable tbody tr:hover{ background:#F3F6F2; }
.dtable .ft{ font-weight:700; color:var(--ink); font-size:13.5px; }
.dtable .fq{ color:var(--ink-soft); }
.dtable .due{ font-weight:800; color:var(--dc,#1E8A55); font-family:'Inter',sans-serif;
letter-spacing:-.01em; font-size:13px; }
.dtable .note{ color:var(--ink-soft); font-size:12.5px; line-height:1.6; }
.dtag{ display:inline-flex; align-items:center; font-size:9px; font-weight:800; letter-spacing:.06em;
text-transform:uppercase; border-radius:20px; padding:2px 8px; margin-bottom:6px; }
.t-cro{ background:#E4F3EA; color:#1E8A55; } .t-rev{ background:#E6EFF9; color:#2A6FB0; }
.t-pay{ background:#F1EAFA; color:#7A55A8; } .t-vat{ background:#FBF1DE; color:#C9871A; }
@media (max-width:980px){
.dtable thead{ display:none; }
.dtable, .dtable tbody, .dtable tr, .dtable td{ display:block; width:100% !important; }
.dtable tr{ padding:16px 18px; border-bottom:1px solid var(--line); }
.dtable td{ padding:3px 0; border:none; font-size:13px; }
.dtable td:before{ content:attr(data-label); display:block; font-size:10px; font-weight:800;
letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-top:8px; }
.dtable td:first-child:before{ display:none; }
}
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
/* ==== templates.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
.mega-stagelink{ display:block; border-radius:8px; margin:-6px -8px 0; padding:6px 8px; transition:background .14s; }
.mega-stagelink:hover{ background:var(--accent-bg); }
.mega-stagelink:hover .mega-name{ text-decoration:underline; }
.mega-all{ display:block !important; font-size:12px; font-weight:800; color:var(--accent) !important;
padding:8px 0 10px !important; margin-bottom:4px; border-bottom:1px solid var(--line); }
.mega-all:hover{ text-decoration:underline; }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:static; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.lead{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:660px; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cols2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.pcard:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--pc); }
.pcard .pi{ width:46px; height:46px; border-radius:13px; background:var(--pcbg); color:var(--pc);
display:block; box-sizing:border-box; padding:12px; margin-bottom:16px; }
.pcard .pi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pcard h3{ font-size:17px; margin-bottom:8px; }
.pcard p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.pcard .tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--pcbg); color:var(--pc); border-radius:5px;
padding:4px 8px; margin-bottom:12px; }
.g1{ --pc:var(--s1); --pcbg:var(--s1-bg); } .g2{ --pc:var(--s2); --pcbg:var(--s2-bg); }
.g3{ --pc:var(--s3); --pcbg:var(--s3-bg); } .g4{ --pc:var(--s4); --pcbg:var(--s4-bg); }
.g5{ --pc:var(--s5); --pcbg:var(--s5-bg); } .g6{ --pc:var(--s7); --pcbg:var(--s7-bg); }
.promise{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px 30px; }
.promise li{ list-style:none; font-size:14.5px; padding:9px 0 9px 28px; position:relative;
border-bottom:1px solid var(--line); }
.promise li:last-child{ border-bottom:none; }
.promise li:before{ content:'✓'; position:absolute; left:0; top:9px; color:var(--s1); font-weight:800; }
.kv{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.kv .ki{ width:38px; height:38px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:block; box-sizing:border-box; padding:10px; flex:none; }
.kv .ki svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kv b{ display:block; font-size:14px; margin-bottom:2px; }
.kv span{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.kv a{ color:var(--s1); font-weight:600; }
.form{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px; }
.form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.form input,.form textarea,.form select{ width:100%; border:1px solid var(--line); border-radius:8px;
padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; margin-bottom:16px;
background:var(--ivory); color:var(--ink); box-sizing:border-box; }
.form textarea{ min-height:110px; resize:vertical; }
.form .btn{ width:100%; text-align:center; padding:13px 0; }
.postlist a{ display:block; background:var(--white); border:1px solid var(--line); border-radius:12px;
padding:22px 24px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.postlist a:hover{ border-color:var(--s1); box-shadow:0 14px 30px -22px rgba(22,36,29,.4); }
.postlist .meta{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--pc,var(--s1)); margin-bottom:7px; display:block; }
.postlist b{ font-size:17px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.postlist span.ex{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.timeline2{ border-left:2px solid var(--line); padding-left:26px; margin-left:8px; }
.tl2{ position:relative; padding-bottom:26px; }
.tl2:last-child{ padding-bottom:0; }
.tl2:before{ content:''; position:absolute; left:-33px; top:4px; width:12px; height:12px;
border-radius:50%; background:var(--s1); border:3px solid var(--ivory); }
.tl2 b{ display:block; font-size:15px; margin-bottom:4px; }
.tl2 span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.note{ background:#FBF1DE; border:1px solid #EBDCB6; border-radius:10px; padding:14px 18px;
font-size:13px; color:#6B551F; }
@media (max-width:980px){ .cols3,.cols2,.cols4{ grid-template-columns:1fr; } }
.soon{ max-width:560px; margin:0 auto; text-align:center; padding:50px 0; }
.soon .si{ width:64px; height:64px; border-radius:18px; margin:0 auto 22px; display:flex;
align-items:center; justify-content:center; color:#fff; background:linear-gradient(140deg,var(--sc),var(--sc2));
box-shadow:0 14px 30px -12px var(--sc); }
.soon .si svg{ width:30px; height:30px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.soon .tag{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
background:var(--scbg); color:var(--sc); border-radius:20px; padding:5px 14px; margin-bottom:16px; }
.soon h2{ font-size:26px; margin-bottom:12px; }
.soon p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:26px; }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
/* ==== about.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
.mega-stagelink{ display:block; border-radius:8px; margin:-6px -8px 0; padding:6px 8px; transition:background .14s; }
.mega-stagelink:hover{ background:var(--accent-bg); }
.mega-stagelink:hover .mega-name{ text-decoration:underline; }
.mega-all{ display:block !important; font-size:12px; font-weight:800; color:var(--accent) !important;
padding:8px 0 10px !important; margin-bottom:4px; border-bottom:1px solid var(--line); }
.mega-all:hover{ text-decoration:underline; }
.has-mega.suppress .mega{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Inter', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:static; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Inter', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.lead{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:660px; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cols2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.pcard:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--pc); }
.pcard .pi{ width:46px; height:46px; border-radius:13px; background:var(--pcbg); color:var(--pc);
display:block; box-sizing:border-box; padding:12px; margin-bottom:16px; }
.pcard .pi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pcard h3{ font-size:17px; margin-bottom:8px; }
.pcard p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.pcard .tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--pcbg); color:var(--pc); border-radius:5px;
padding:4px 8px; margin-bottom:12px; }
.g1{ --pc:var(--s1); --pcbg:var(--s1-bg); } .g2{ --pc:var(--s2); --pcbg:var(--s2-bg); }
.g3{ --pc:var(--s3); --pcbg:var(--s3-bg); } .g4{ --pc:var(--s4); --pcbg:var(--s4-bg); }
.g5{ --pc:var(--s5); --pcbg:var(--s5-bg); } .g6{ --pc:var(--s7); --pcbg:var(--s7-bg); }
.promise{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px 30px; }
.promise li{ list-style:none; font-size:14.5px; padding:9px 0 9px 28px; position:relative;
border-bottom:1px solid var(--line); }
.promise li:last-child{ border-bottom:none; }
.promise li:before{ content:'✓'; position:absolute; left:0; top:9px; color:var(--s1); font-weight:800; }
.kv{ display:flex; gap:14px; align-items:flex-start; padding:15px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.kv .ci{ width:38px; height:38px; border-radius:11px; box-sizing:border-box; padding:10px; color:#fff; flex:none;
background:linear-gradient(140deg,var(--cc),var(--cc2)); box-shadow:0 6px 13px -6px var(--cc); }
.kv .ci svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kv b{ display:block; font-size:14px; margin-bottom:2px; }
.kv span{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.kv a{ color:var(--s1); font-weight:600; }
.form{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px; }
.form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.form input,.form textarea,.form select{ width:100%; border:1px solid var(--line); border-radius:8px;
padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; margin-bottom:16px;
background:var(--ivory); color:var(--ink); box-sizing:border-box; }
.form textarea{ min-height:110px; resize:vertical; }
.form .btn{ width:100%; text-align:center; padding:13px 0; }
.postlist a{ display:block; background:var(--white); border:1px solid var(--line); border-radius:12px;
padding:22px 24px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.postlist a:hover{ border-color:var(--s1); box-shadow:0 14px 30px -22px rgba(22,36,29,.4); }
.postlist .meta{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--pc,var(--s1)); margin-bottom:7px; display:block; }
.postlist b{ font-size:17px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.postlist span.ex{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.timeline2{ border-left:2px solid var(--line); padding-left:26px; margin-left:8px; }
.tl2{ position:relative; padding-bottom:26px; }
.tl2:last-child{ padding-bottom:0; }
.tl2:before{ content:''; position:absolute; left:-33px; top:4px; width:12px; height:12px;
border-radius:50%; background:var(--s1); border:3px solid var(--ivory); }
.tl2 b{ display:block; font-size:15px; margin-bottom:4px; }
.tl2 span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.note{ background:#FBF1DE; border:1px solid #EBDCB6; border-radius:10px; padding:14px 18px;
font-size:13px; color:#6B551F; }
@media (max-width:980px){ .cols3,.cols2,.cols4{ grid-template-columns:1fr; } }
.team{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tm{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:22px;
text-align:center; transition:box-shadow .18s, transform .18s, border-color .18s; }
.tm:hover{ box-shadow:0 16px 34px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--tc); }
.tm .av{ width:56px; height:56px; border-radius:50%; margin:0 auto 13px;
display:flex; align-items:center; justify-content:center;
font-family:'Inter',sans-serif; font-weight:800; font-size:16px; color:#fff;
letter-spacing:-.02em; background:linear-gradient(140deg,var(--tc),var(--tc2)); }
.tm b{ display:block; font-size:14.5px; margin-bottom:3px; letter-spacing:-.01em; }
.tm span{ font-size:12px; color:var(--ink-soft); line-height:1.45; display:block; }
.t1{ --tc:#1E8A55; --tc2:#2FB273; } .t2{ --tc:#2A6FB0; --tc2:#4B95D6; }
.t3{ --tc:#C9871A; --tc2:#E5A83E; } .t4{ --tc:#7A55A8; --tc2:#9C78C9; }
.t5{ --tc:#0E8A80; --tc2:#22ADA2; } .t6{ --tc:#C25630; --tc2:#DE7A52; }
.t7{ --tc:#46707A; --tc2:#6C9AA5; } .t8{ --tc:#1E8A55; --tc2:#4BB98C; }
.cred{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px 28px; margin-top:24px; }
.cred > div{ display:flex; gap:13px; align-items:flex-start; padding:6px 0; }
.cred .ci{ width:34px; height:34px; border-radius:10px; flex:none; box-sizing:border-box; padding:8px;
color:#fff; display:block; background:linear-gradient(140deg,var(--cc),var(--cc2));
box-shadow:0 5px 12px -5px var(--cc); }
.cred .ci svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; }
.c1{ --cc:#1E8A55; --cc2:#2FB273; } .c2{ --cc:#2A6FB0; --cc2:#4B95D6; }
.c3{ --cc:#C9871A; --cc2:#E5A83E; } .c4{ --cc:#7A55A8; --cc2:#9C78C9; }
.cred b{ display:block; font-size:13.5px; margin-bottom:3px; }
.cred span{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
.ceo{ display:flex; gap:26px; align-items:flex-start; padding:0; }
.ceo .photo{ width:148px; height:172px; border-radius:16px; object-fit:cover; flex:none;
box-shadow:0 16px 34px -16px rgba(22,36,29,.4); }
.ceo h3{ font-size:22px; margin-bottom:2px; }
.ceo .role{ font-size:12.5px; font-weight:700; color:var(--s1); letter-spacing:.05em;
text-transform:uppercase; margin-bottom:12px; display:block; }
.plat2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.plat2 > div{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:28px; }
.plat2 .nm{ font-family:'Inter',sans-serif; font-weight:800; font-size:20px;
letter-spacing:-.03em; margin-bottom:10px; display:block; }
.plat2 p{ font-size:13.5px; color:var(--ink-soft); line-height:1.65; }
.badge{ display:inline-flex; align-items:center; gap:7px; background:var(--s3-bg); color:var(--s3);
border-radius:20px; padding:7px 14px; font-size:12px; font-weight:700; margin:0 6px 8px 0; }
@media (max-width:980px){ .team{ grid-template-columns:1fr 1fr; } .cred,.plat2{ grid-template-columns:1fr; }
.ceo{ flex-direction:column; } }
.head2{ display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:start; margin-bottom:44px; }
.head2 .eyebrow{ display:block; margin-bottom:14px; }
.head2 h2{ font-size:30px; font-weight:800; letter-spacing:-.03em; margin:0; line-height:1.25; }
.head2 p{ color:var(--ink-soft); font-size:15.5px; line-height:1.7; margin:0; padding-top:30px; }
@media (max-width:980px){ .head2{ grid-template-columns:1fr; gap:16px; align-items:start; } .head2 p{ padding-top:0; } }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
/* ==== contact.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
.mega-stagelink{ display:block; border-radius:8px; margin:-6px -8px 0; padding:6px 8px; transition:background .14s; }
.mega-stagelink:hover{ background:var(--accent-bg); }
.mega-stagelink:hover .mega-name{ text-decoration:underline; }
.mega-all{ display:block !important; font-size:12px; font-weight:800; color:var(--accent) !important;
padding:8px 0 10px !important; margin-bottom:4px; border-bottom:1px solid var(--line); }
.mega-all:hover{ text-decoration:underline; }
.has-mega.suppress .mega{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Inter', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:static; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Inter', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.lead{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:660px; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cols2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.pcard:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--pc); }
.pcard .pi{ width:46px; height:46px; border-radius:13px; background:var(--pcbg); color:var(--pc);
display:block; box-sizing:border-box; padding:12px; margin-bottom:16px; }
.pcard .pi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pcard h3{ font-size:17px; margin-bottom:8px; }
.pcard p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.pcard .tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--pcbg); color:var(--pc); border-radius:5px;
padding:4px 8px; margin-bottom:12px; }
.g1{ --pc:var(--s1); --pcbg:var(--s1-bg); } .g2{ --pc:var(--s2); --pcbg:var(--s2-bg); }
.g3{ --pc:var(--s3); --pcbg:var(--s3-bg); } .g4{ --pc:var(--s4); --pcbg:var(--s4-bg); }
.g5{ --pc:var(--s5); --pcbg:var(--s5-bg); } .g6{ --pc:var(--s7); --pcbg:var(--s7-bg); }
.promise{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px 30px; }
.promise li{ list-style:none; font-size:14.5px; padding:9px 0 9px 28px; position:relative;
border-bottom:1px solid var(--line); }
.promise li:last-child{ border-bottom:none; }
.promise li:before{ content:'✓'; position:absolute; left:0; top:9px; color:var(--s1); font-weight:800; }
.kv{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.kv .ki{ width:38px; height:38px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:block; box-sizing:border-box; padding:10px; flex:none; }
.kv .ki svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kv b{ display:block; font-size:14px; margin-bottom:2px; }
.kv span{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.kv a{ color:var(--s1); font-weight:600; }
.form{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px; }
.form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.form input,.form textarea,.form select{ width:100%; border:1px solid var(--line); border-radius:8px;
padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; margin-bottom:16px;
background:var(--ivory); color:var(--ink); box-sizing:border-box; }
.form textarea{ min-height:110px; resize:vertical; }
.form .btn{ width:100%; text-align:center; padding:13px 0; }
.postlist a{ display:block; background:var(--white); border:1px solid var(--line); border-radius:12px;
padding:22px 24px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.postlist a:hover{ border-color:var(--s1); box-shadow:0 14px 30px -22px rgba(22,36,29,.4); }
.postlist .meta{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--pc,var(--s1)); margin-bottom:7px; display:block; }
.postlist b{ font-size:17px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.postlist span.ex{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.timeline2{ border-left:2px solid var(--line); padding-left:26px; margin-left:8px; }
.tl2{ position:relative; padding-bottom:26px; }
.tl2:last-child{ padding-bottom:0; }
.tl2:before{ content:''; position:absolute; left:-33px; top:4px; width:12px; height:12px;
border-radius:50%; background:var(--s1); border:3px solid var(--ivory); }
.tl2 b{ display:block; font-size:15px; margin-bottom:4px; }
.tl2 span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.note{ background:#FBF1DE; border:1px solid #EBDCB6; border-radius:10px; padding:14px 18px;
font-size:13px; color:#6B551F; }
@media (max-width:980px){ .cols3,.cols2,.cols4{ grid-template-columns:1fr; } }
.team{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tm{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:22px;
text-align:center; transition:box-shadow .18s, transform .18s, border-color .18s; }
.tm:hover{ box-shadow:0 16px 34px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--tc); }
.tm .av{ width:56px; height:56px; border-radius:50%; margin:0 auto 13px;
display:flex; align-items:center; justify-content:center;
font-family:'Inter',sans-serif; font-weight:800; font-size:16px; color:#fff;
letter-spacing:-.02em; background:linear-gradient(140deg,var(--tc),var(--tc2)); }
.tm b{ display:block; font-size:14.5px; margin-bottom:3px; letter-spacing:-.01em; }
.tm span{ font-size:12px; color:var(--ink-soft); line-height:1.45; display:block; }
.t1{ --tc:#1E8A55; --tc2:#2FB273; } .t2{ --tc:#2A6FB0; --tc2:#4B95D6; }
.t3{ --tc:#C9871A; --tc2:#E5A83E; } .t4{ --tc:#7A55A8; --tc2:#9C78C9; }
.t5{ --tc:#0E8A80; --tc2:#22ADA2; } .t6{ --tc:#C25630; --tc2:#DE7A52; }
.t7{ --tc:#46707A; --tc2:#6C9AA5; } .t8{ --tc:#1E8A55; --tc2:#4BB98C; }
.ceo{ display:flex; gap:22px; align-items:flex-start; background:var(--white);
border:1px solid var(--line); border-radius:14px; padding:28px 30px; }
.ceo .av{ width:78px; height:78px; border-radius:50%; flex:none;
display:flex; align-items:center; justify-content:center; color:#fff;
font-family:'Inter',sans-serif; font-weight:800; font-size:24px; letter-spacing:-.03em;
background:linear-gradient(140deg,#1E8A55,#2FB273); }
.ceo h3{ font-size:21px; margin-bottom:2px; }
.ceo .role{ font-size:12.5px; font-weight:700; color:var(--s1); letter-spacing:.05em;
text-transform:uppercase; margin-bottom:12px; display:block; }
.plat2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.plat2 > div{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:28px; }
.plat2 .nm{ font-family:'Inter',sans-serif; font-weight:800; font-size:20px;
letter-spacing:-.03em; margin-bottom:10px; display:block; }
.plat2 p{ font-size:13.5px; color:var(--ink-soft); line-height:1.65; }
.badge{ display:inline-flex; align-items:center; gap:7px; background:var(--s3-bg); color:var(--s3);
border-radius:20px; padding:7px 14px; font-size:12px; font-weight:700; margin:0 6px 8px 0; }
@media (max-width:980px){ .team{ grid-template-columns:1fr 1fr; } .plat2{ grid-template-columns:1fr; }
.ceo{ flex-direction:column; } }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
/* ==== terms.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
.mega-stagelink{ display:block; border-radius:8px; margin:-6px -8px 0; padding:6px 8px; transition:background .14s; }
.mega-stagelink:hover{ background:var(--accent-bg); }
.mega-stagelink:hover .mega-name{ text-decoration:underline; }
.mega-all{ display:block !important; font-size:12px; font-weight:800; color:var(--accent) !important;
padding:8px 0 10px !important; margin-bottom:4px; border-bottom:1px solid var(--line); }
.mega-all:hover{ text-decoration:underline; }
.has-mega.suppress .mega{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Inter', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:static; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Inter', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.lead{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:660px; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cols2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
transition:box-shadow .18s, transform .18s, border-color .18s; }
.pcard:hover{ box-shadow:0 18px 38px -24px rgba(22,36,29,.4); transform:translateY(-3px); border-color:var(--pc); }
.pcard .pi{ width:46px; height:46px; border-radius:13px; background:var(--pcbg); color:var(--pc);
display:block; box-sizing:border-box; padding:12px; margin-bottom:16px; }
.pcard .pi svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pcard h3{ font-size:17px; margin-bottom:8px; }
.pcard p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.pcard .tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; background:var(--pcbg); color:var(--pc); border-radius:5px;
padding:4px 8px; margin-bottom:12px; }
.g1{ --pc:var(--s1); --pcbg:var(--s1-bg); } .g2{ --pc:var(--s2); --pcbg:var(--s2-bg); }
.g3{ --pc:var(--s3); --pcbg:var(--s3-bg); } .g4{ --pc:var(--s4); --pcbg:var(--s4-bg); }
.g5{ --pc:var(--s5); --pcbg:var(--s5-bg); } .g6{ --pc:var(--s7); --pcbg:var(--s7-bg); }
.promise{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px 30px; }
.promise li{ list-style:none; font-size:14.5px; padding:9px 0 9px 28px; position:relative;
border-bottom:1px solid var(--line); }
.promise li:last-child{ border-bottom:none; }
.promise li:before{ content:'✓'; position:absolute; left:0; top:9px; color:var(--s1); font-weight:800; }
.kv{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.kv .ki{ width:38px; height:38px; border-radius:10px; background:var(--s1-bg); color:var(--s1);
display:block; box-sizing:border-box; padding:10px; flex:none; }
.kv .ki svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kv b{ display:block; font-size:14px; margin-bottom:2px; }
.kv span{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.kv a{ color:var(--s1); font-weight:600; }
.form{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:28px; }
.form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.form input,.form textarea,.form select{ width:100%; border:1px solid var(--line); border-radius:8px;
padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; margin-bottom:16px;
background:var(--ivory); color:var(--ink); box-sizing:border-box; }
.form textarea{ min-height:110px; resize:vertical; }
.form .btn{ width:100%; text-align:center; padding:13px 0; }
.postlist a{ display:block; background:var(--white); border:1px solid var(--line); border-radius:12px;
padding:22px 24px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.postlist a:hover{ border-color:var(--s1); box-shadow:0 14px 30px -22px rgba(22,36,29,.4); }
.postlist .meta{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--pc,var(--s1)); margin-bottom:7px; display:block; }
.postlist b{ font-size:17px; display:block; margin-bottom:6px; letter-spacing:-.015em; }
.postlist span.ex{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.timeline2{ border-left:2px solid var(--line); padding-left:26px; margin-left:8px; }
.tl2{ position:relative; padding-bottom:26px; }
.tl2:last-child{ padding-bottom:0; }
.tl2:before{ content:''; position:absolute; left:-33px; top:4px; width:12px; height:12px;
border-radius:50%; background:var(--s1); border:3px solid var(--ivory); }
.tl2 b{ display:block; font-size:15px; margin-bottom:4px; }
.tl2 span{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.note{ background:#FBF1DE; border:1px solid #EBDCB6; border-radius:10px; padding:14px 18px;
font-size:13px; color:#6B551F; }
@media (max-width:980px){ .cols3,.cols2,.cols4{ grid-template-columns:1fr; } }
.legal{ max-width:820px; }
.legal .updated{ font-size:12.5px; color:var(--ink-soft); margin-bottom:8px; }
.legal h2{ font-size:21px; margin:34px 0 12px; letter-spacing:-.01em; }
.legal h2:first-of-type{ margin-top:0; }
.legal h3{ font-size:16px; margin:22px 0 8px; }
.legal p{ font-size:14.5px; line-height:1.75; color:var(--ink-soft); margin-bottom:13px; }
.legal ul{ margin:0 0 15px 0; }
.legal li{ list-style:none; font-size:14.5px; line-height:1.7; color:var(--ink-soft);
padding:4px 0 4px 22px; position:relative; }
.legal li:before{ content:''; position:absolute; left:3px; top:13px; width:5px; height:5px;
border-radius:50%; background:var(--s2); }
.legal strong{ color:var(--ink); }
.legaltable{ width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line);
border-radius:10px; overflow:hidden; margin:10px 0 20px; }
.legaltable th,.legaltable td{ padding:11px 14px; text-align:left; font-size:13px; border-bottom:1px solid var(--line); vertical-align:top; }
.legaltable thead th{ background:var(--forest); color:#fff; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; }
.legaltable tbody tr:nth-child(even){ background:#FBFAF7; }
.legaltable tbody tr:last-child td{ border-bottom:none; }
.legalnote{ background:#E6EFF9; border:1px solid #C7DAEF; border-radius:10px; padding:14px 18px;
font-size:12.5px; color:#1E3E5C; line-height:1.6; margin:26px 0; }
.sidebox{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:22px 24px; position:static; }
.sidebox b{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:12px; }
.sidebox .row{ display:flex; gap:9px; font-size:12.5px; color:var(--ink-soft); padding:6px 0; }
.sidebox .row b.k{ min-width:60px; color:var(--ink); font-weight:700; }
.legalgrid{ display:grid; grid-template-columns:1fr 250px; gap:44px; align-items:start; }
@media (max-width:980px){ .legalgrid{ grid-template-columns:1fr; } .sidebox{ position:static; } }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
/* ==== cat-advisory.html ==== */
/* ===== MEGA MENU ===== */
nav.site{ position:relative; }
.nav-links{ align-items:center; }
.has-mega{ display:flex; align-items:center; }
.has-mega > a{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.chev{ font-size:9px; color:var(--sage-dim); transition:transform .18s ease; display:inline-block; }
.has-mega:hover .chev{ transform:rotate(180deg); }
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 24px 44px -24px rgba(22,36,29,0.35);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner{ max-width:1320px; margin:0 auto; padding:30px 32px 26px;
display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.mega-col{ --accent:var(--s1); }
.mega-col.m1{ --accent:var(--s1); --accent-bg:var(--s1-bg); }
.mega-col.m2{ --accent:var(--s2); --accent-bg:var(--s2-bg); }
.mega-col.m3{ --accent:var(--s3); --accent-bg:var(--s3-bg); }
.mega-col.m4{ --accent:var(--s4); --accent-bg:var(--s4-bg); }
.mega-col.m5{ --accent:var(--s5); --accent-bg:var(--s5-bg); }
.mega-col.m6{ --accent:var(--s6); --accent-bg:var(--s6-bg); }
.mega-stage{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.mega-num{ font-size:9.5px; font-weight:800; letter-spacing:0.06em; color:var(--accent);
background:var(--accent-bg); border-radius:4px; padding:3px 6px; line-height:1; }
.mega-name{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.mega-desc{ font-size:11px; color:var(--ink-soft); margin-bottom:12px; line-height:1.4;
padding-bottom:11px; border-bottom:1px solid var(--line); }
.mega-col a{ display:block; font-size:12.5px; color:var(--ink); padding:5px 0; line-height:1.35; font-weight:500; }
.mega-col a:hover{ color:var(--accent); }
.mega-foot{ border-top:1px solid var(--line); background:#FBFAF7; }
.mega-foot-inner{ max-width:1320px; margin:0 auto; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.mega-foot a{ font-size:12.5px; font-weight:700; color:var(--signature); }
.mega-foot span{ font-size:12px; color:var(--ink-soft); }
.mega-stagelink{ display:block; border-radius:8px; margin:-6px -8px 0; padding:6px 8px; transition:background .14s; }
.mega-stagelink:hover{ background:var(--accent-bg); }
.mega-stagelink:hover .mega-name{ text-decoration:underline; }
.mega-all{ display:block !important; font-size:12px; font-weight:800; color:var(--accent) !important;
padding:8px 0 10px !important; margin-bottom:4px; border-bottom:1px solid var(--line); }
.mega-all:hover{ text-decoration:underline; }
.has-mega.suppress .mega{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
@media (max-width:1240px){ .mega{ display:none; } }
/* NAV — light */
nav.site{ background:var(--white); border-bottom:1px solid var(--line); padding:16px 0; }
.brand-text{ color:var(--ink); }
.brand-sub{ color:var(--sage-dim); }
.nav-links a{ color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.btn-ghost{ color:var(--ink); border-color:var(--line); background:var(--white); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.detail-body h2{ font-size:23px; margin:38px 0 14px; }
.detail-body h2:first-child{ margin-top:0; }
.detail-body p{ font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; }
.steps{ counter-reset:step; margin:18px 0; }
.step{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step:before{
counter-increment:step; content:counter(step, decimal-leading-zero);
font-family:'Inter', sans-serif; font-weight:800; color:var(--s3); font-size:14px; flex:none; padding-top:2px;
background:var(--s3-bg); border-radius:6px; padding:6px 8px; height:fit-content;
}
.step b{ font-size:14.5px; display:block; margin-bottom:3px; }
.step span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.buy{ position:static; }
.buy-card{ background:var(--white); border:1px solid var(--line); border-radius:9px; padding:26px; box-shadow:0 14px 30px -18px rgba(22,36,29,0.18); }
.buy-price{ font-family:'Inter', sans-serif; font-weight:800; font-size:32px; }
.buy-price small{ font-size:13px; font-weight:500; font-family:'Inter', sans-serif; color:var(--ink-soft); }
.buy-sub{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 18px; }
.buy-list{ list-style:none; margin-bottom:20px; }
.buy-list li{ font-size:13.5px; padding:5px 0; }
.buy-list li{ padding-left:22px; position:relative; }
.buy-list li:before{ content:''; position:absolute; left:0; top:8px; width:13px; height:13px; border-radius:50%; background:var(--s1-bg);
background-image:url("data:image/svg+xml;utf8,"); background-size:9px; background-repeat:no-repeat; background-position:center; }
.buy-card .btn{ width:100%; text-align:center; padding:13px 0; font-size:14.5px; }
.buy-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }
.related{ margin-top:18px; background:var(--ivory-2); border-radius:9px; padding:20px 22px; }
.related h4{ font-size:13px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; color:var(--ink-soft); }
.related a{ display:block; font-size:13.5px; font-weight:600; color:var(--s2); padding:5px 0; }
.urgent{
background:#FBEFE8; border:1px solid #E8CBB8; border-radius:9px; padding:20px 24px; margin-top:34px;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.urgent b{ display:block; font-size:15px; color:var(--rust); margin-bottom:4px; }
.urgent span{ font-size:13.5px; color:var(--ink-soft); }
.urgent .btn{ border-color:var(--rust); color:var(--rust); flex:none; }
.urgent .btn:hover{ background:var(--rust); color:var(--white); }
.faq{ margin-top:8px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary:after{ content:'+'; float:right; color:var(--signature); font-weight:700; }
.faq details[open] summary:after{ content:'–'; }
.faq details p{ margin-top:10px; font-size:13.5px; }
@media (max-width: 980px){
.detail-grid{ grid-template-columns:1fr; }
.buy{ position:static; }
}
/* icon tiles — svg fills a padded box, so it is always centred */
.ico-tile{ width:42px; height:42px; border-radius:11px; flex:0 0 auto;
display:block; box-sizing:border-box; padding:10px; }
.ico-tile svg{ display:block; width:100%; height:100%; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc .ico-tile,.tenitem .ico-tile,.typecard .ico-tile,.addon .ico-tile{
width:38px; height:38px; border-radius:10px; padding:9px; }
.subsec h3 .ico-tile{ width:34px; height:34px; border-radius:9px; padding:8px; }
.svc .ico-tile{ margin-right:12px; }
.addon{ align-items:center; }
.typecard .ico-tile{ margin-right:2px; }
.catgrid{ display:grid; grid-template-columns:1fr 300px; gap:52px; align-items:start; }
.subsec{ border-top:1px solid var(--line); padding-top:20px; margin-bottom:32px; }
.subsec:first-child{ border-top:none; padding-top:0; }
.subsec h3{ font-size:17px; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.subsec h3 .cnt{ font-size:11px; font-weight:800; color:var(--acc); background:var(--accbg);
border-radius:5px; padding:3px 8px; }
.srv{ background:var(--white); border:1px solid var(--line); border-radius:10px; padding:18px 20px;
display:flex; gap:20px; align-items:flex-start; margin-bottom:10px; transition:border-color .15s, box-shadow .15s; }
.srv:hover{ border-color:var(--acc); box-shadow:0 12px 26px -20px rgba(22,36,29,.4); }
.srvinfo{ flex:1; }
.srvinfo b{ font-size:15px; display:block; margin-bottom:4px; }
.srvinfo .desc{ font-size:13px; color:var(--ink-soft); line-height:1.5; display:block; margin-bottom:9px; }
.sp{ display:flex; flex-wrap:wrap; gap:6px 14px; }
.sp span{ font-size:11.5px; color:var(--ink-soft); padding-left:15px; position:relative; }
.sp span:before{ content:'✓'; position:absolute; left:0; color:var(--acc); font-weight:800; font-size:10px; }
.srvbuy{ text-align:right; flex:none; min-width:132px; }
.srvbuy .pr{ font-family:'Inter',sans-serif; font-weight:800; font-size:18px;
letter-spacing:-.03em; display:block; }
.srvbuy .pvat{ font-size:10px; font-weight:600; color:var(--ink-soft); display:block; margin-top:1px; }
.srvbuy .fq{ font-size:10.5px; color:var(--ink-soft); display:block; margin:2px 0 10px; }
.srvbuy .btn{ padding:8px 16px; font-size:12px; display:block; text-align:center; }
.srvbuy .btn+.btn{ margin-top:6px; }
.btn-cart{ background:var(--acc, var(--signature)); color:#fff; }
.btn-cart:hover{ filter:brightness(1.08); }
.btn-det{ border-color:var(--line); color:var(--ink-soft); }
.btn-det:hover{ border-color:var(--acc); color:var(--acc); }
.jump{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; }
.jump a{ font-size:12px; font-weight:600; border:1px solid var(--line); border-radius:20px;
padding:7px 14px; background:var(--white); color:var(--ink-soft); }
.jump a:hover{ border-color:var(--acc); color:var(--acc); }
@media (max-width:980px){ .catgrid{ grid-template-columns:1fr; } .srv{ flex-wrap:wrap; } .srvbuy{ text-align:left; } }
.filterbar{ background:var(--white); border:1px solid var(--line); border-radius:10px;
padding:15px 18px; margin-bottom:26px; }
.flab{ display:block; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
color:var(--ink-soft); margin-bottom:11px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; cursor:pointer;
border:1px solid var(--line); background:var(--ivory); color:var(--ink-soft);
border-radius:20px; padding:8px 14px; transition:all .14s; }
.chip em{ font-style:normal; font-weight:700; opacity:.55; margin-left:4px; font-size:11px; }
.chip:hover{ border-color:var(--acc); color:var(--acc); }
.chip.on{ background:var(--acc); border-color:var(--acc); color:#fff; }
.chip.on em{ opacity:.75; }
.subsec.hide{ display:none; }
.app-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
background:var(--forest); color:#fff; font-size:13.5px; font-weight:600; padding:14px 22px;
border-radius:30px; box-shadow:0 16px 40px -14px rgba(14,59,46,.6); z-index:9999; opacity:0;
transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-modal-overlay{ position:fixed; inset:0; background:rgba(22,36,29,.55); z-index:9998;
display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .22s; }
.app-modal-overlay.show{ opacity:1; }
.app-modal{ background:#fff; border-radius:18px; padding:34px 36px; max-width:480px; width:100%;
position:relative; transform:translateY(14px); transition:transform .22s; }
.app-modal-overlay.show .app-modal{ transform:translateY(0); }
.app-modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:22px;
color:var(--ink-soft); cursor:pointer; line-height:1; }
.app-modal h3{ font-size:19px; margin-bottom:18px; padding-right:20px; }
.app-modal-steps div{ display:flex; gap:14px; margin-bottom:16px; }
.app-modal-steps b{ width:26px; height:26px; border-radius:8px; background:var(--s1-bg); color:var(--s1);
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none; }
.app-modal-steps span{ font-weight:700; font-size:13.5px; display:block; margin-bottom:2px; }
.app-modal-steps p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.app-modal-note{ font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line);
padding-top:14px; margin-top:4px; line-height:1.6; }
.app-modal-note a{ color:var(--s1); font-weight:700; }
.cart-link{ position:relative; display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:9px; color:var(--ink); transition:background .15s; }
.cart-link:hover{ background:var(--s1-bg); }
.cart-link svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:-3px; right:-3px; background:#C25630; color:#fff;
font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:'Inter',sans-serif; }
/* ==== name-check ==== */
.nc-wrap{ max-width:880px; margin:0 auto; }
.nc-card{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:28px; box-shadow:0 10px 30px rgba(14,59,46,.07); margin-top:-34px; position:relative; }
.nc-card label{ display:block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
.nc-row{ display:flex; gap:10px; }
.nc-row input{ flex:1; min-width:0; border:1.5px solid var(--line); border-radius:10px; padding:15px 16px; font:600 17px 'Inter',sans-serif; color:var(--ink); background:#FCFBF8; }
.nc-row input:focus{ outline:none; border-color:var(--signature); background:#fff; box-shadow:0 0 0 3px rgba(31,122,77,.15); }
.nc-row button{ border:0; border-radius:10px; padding:0 26px; background:var(--signature); color:#fff; font:700 15px 'Inter',sans-serif; cursor:pointer; white-space:nowrap; }
.nc-row button:hover{ background:var(--forest); }
.nc-row button[disabled]{ opacity:.6; cursor:wait; }
.nc-tip{ font-size:12.5px; color:var(--ink-soft); margin-top:10px; line-height:1.5; }
.nc-out{ margin-top:22px; }
.nc-msg{ padding:14px 16px; border-radius:10px; background:var(--s3-bg); color:#7A5210; font-size:14px; }
.nc-loading{ display:flex; align-items:center; gap:12px; color:var(--ink-soft); font-size:14px; padding:6px 0; }
.nc-spin{ width:18px; height:18px; border:2.5px solid var(--line); border-top-color:var(--signature); border-radius:50%; animation:ncspin .8s linear infinite; }
@keyframes ncspin{ to{ transform:rotate(360deg); } }
.nc-verdict{ display:flex; gap:16px; align-items:flex-start; padding:20px 22px; border-radius:12px; border:1.5px solid; }
.nc-verdict .vi{ flex:none; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:#fff; }
.nc-verdict h3{ font-size:19px; margin-bottom:4px; }
.nc-verdict p{ font-size:14px; line-height:1.55; color:var(--ink-soft); }
.nc-verdict .qn{ font-weight:800; color:var(--ink); }
.nc-verdict.ok{ background:var(--s1-bg); border-color:var(--s1); } .nc-verdict.ok .vi{ background:var(--s1); }
.nc-verdict.warn{ background:var(--s3-bg); border-color:var(--s3); } .nc-verdict.warn .vi{ background:var(--s3); }
.nc-verdict.bad{ background:var(--s5-bg); border-color:var(--s5); } .nc-verdict.bad .vi{ background:var(--s5); }
.nc-verdict.unknown{ background:var(--s6-bg); border-color:var(--s6); } .nc-verdict.unknown .vi{ background:var(--s6); }
.nc-panels{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.nc-panel{ border:1px solid var(--line); border-radius:12px; padding:18px 20px; background:#FCFBF8; }
.nc-panel h4{ font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }
.nc-li{ display:flex; gap:10px; font-size:13.5px; line-height:1.5; padding:7px 0; border-top:1px solid #EEEBE0; }
.nc-li:first-of-type{ border-top:0; }
.nc-li .m{ flex:none; width:20px; height:20px; border-radius:50%; font-size:11px; font-weight:800; color:#fff; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.nc-li .m.ok{ background:var(--s1); } .nc-li .m.warn{ background:var(--s3); } .nc-li .m.bad{ background:var(--s5); } .nc-li .m.info{ background:var(--s6); }
.nc-grp{ font-size:12.5px; font-weight:700; margin:12px 0 4px; } .nc-grp:first-of-type{ margin-top:0; }
.nc-grp.bad{ color:var(--s5); } .nc-grp.warn{ color:var(--s3); } .nc-grp.rel{ color:var(--ink-soft); }
.nc-co{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding:6px 0; border-top:1px solid #EEEBE0; }
.nc-co b{ font-weight:600; color:var(--ink); word-break:break-word; } .nc-co span{ color:var(--ink-soft); font-size:12px; white-space:nowrap; }
.nc-panel details summary{ cursor:pointer; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-top:12px; }
.nc-next{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.nc-fine{ font-size:12px; color:var(--ink-soft); line-height:1.55; margin-top:14px; }
.nc-fine a, .nc-panel a.ext{ color:var(--signature); text-decoration:underline; }
.nc-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; }
.nc-step{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:22px; }
.nc-step .n{ display:inline-flex; width:30px; height:30px; border-radius:8px; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:#fff; background:var(--signature); margin-bottom:12px; }
.nc-step:nth-child(2) .n{ background:var(--s3); } .nc-step:nth-child(3) .n{ background:var(--s2); }
.nc-step h3{ font-size:16px; margin-bottom:6px; } .nc-step p{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); }
.nc-table{ width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:22px; font-size:14px; }
.nc-table th{ text-align:left; background:var(--forest); color:#fff; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:12px 16px; }
.nc-table td{ padding:12px 16px; border-top:1px solid #EEEBE0; vertical-align:top; line-height:1.5; }
.nc-table td:first-child{ font-weight:700; width:38%; }
.nc-faq details{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:0 20px; margin-top:10px; }
.nc-faq summary{ cursor:pointer; font-weight:700; font-size:15px; padding:16px 0; }
.nc-faq details p{ font-size:14px; line-height:1.65; color:var(--ink-soft); padding:0 0 16px; }
.nc-teaser{ background:linear-gradient(100deg,var(--forest) 0%,#14513C 60%,#12706B 100%); border-radius:18px; padding:34px 38px; display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:center; color:#fff; }
.nc-teaser .eyebrow{ color:#9BD3B4; }
.nc-teaser h2{ color:#fff; font-size:27px; margin:10px 0 8px; }
.nc-teaser p{ color:#C7D8CE; font-size:14.5px; line-height:1.6; }
.nc-teaser .nc-row input{ background:#fff; }
.nc-teaser .nc-row button{ background:#F2B84B; color:#2A1D02; }
.nc-teaser .nc-row button:hover{ background:#fff; }
.nc-teaser small{ display:block; margin-top:10px; font-size:12px; color:#A9C2B4; }
@media (max-width:820px){
.nc-panels,.nc-steps,.nc-teaser{ grid-template-columns:1fr; }
.nc-row{ flex-direction:column; } .nc-row button{ padding:14px; }
.nc-teaser{ padding:26px 22px; }
}
/* team grid: centre a final short row */
.team{ display:flex !important; flex-wrap:wrap; justify-content:center; }
.team .tm{ flex:0 0 calc(25% - 11px); }
@media (max-width:980px){ .team .tm{ flex:0 0 calc(50% - 7px); } }
/* Contact form */
.form button.btn{ font-family:inherit; cursor:pointer; }
.form button.btn:disabled{ opacity:.6; cursor:default; }
.cf-hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.cf-status{ font-size:13.5px; line-height:1.5; margin-top:12px; }
.cf-status:empty{ display:none; }
.cf-status.ok{ color:#1E6B43; background:#E4F3EA; border:1px solid #BFE0CC; border-radius:8px; padding:10px 12px; }
.cf-status.err{ color:#9A3412; background:#FBEBE3; border:1px solid #F0C9B6; border-radius:8px; padding:10px 12px; }
.form .cf-invalid{ border-color:#C25630; }
/* Opsus360 portal shop (embedded) */
.opsus-frame{ background:var(--white); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.opsus-note{ font-size:13px; color:var(--ink-soft); margin-top:14px; text-align:center; }
/* Cart modal (portal cart) */
.opsus-modal-overlay{ position:fixed; inset:0; z-index:9998; background:rgba(22,36,29,.55); display:flex;
align-items:center; justify-content:center; padding:16px; opacity:0; transition:opacity .2s; }
.opsus-modal-overlay[hidden]{ display:none; }
.opsus-modal-overlay.show{ opacity:1; }
.opsus-modal{ background:var(--white); border-radius:14px; width:100%; max-width:760px; max-height:calc(100vh - 32px);
overflow:auto; box-shadow:0 24px 60px rgba(14,59,46,.25); }
.opsus-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); }
.opsus-modal-head h2{ font-size:18px; margin:0; color:var(--ink); }
.opsus-modal-close{ border:0; background:none; font-size:28px; line-height:1; color:var(--ink-soft); cursor:pointer; padding:2px 8px; }
.opsus-modal-close:hover{ color:var(--ink); }
.opsus-modal iframe{ max-height:calc(100vh - 100px); }
html.opsus-modal-open{ overflow:hidden; }
.opsus-modal-loading{ display:none; padding:40px 18px; text-align:center; color:var(--ink-soft); font-size:14px; }
.opsus-modal.loading .opsus-modal-loading, .opsus-modal-overlay.loading .opsus-modal-loading{ display:block; }
.opsus-modal-overlay.loading iframe{ visibility:hidden; height:0; }