/* ============================================
CANDEV.ORG — Global Stylesheet
Ready for WordPress theme integration
============================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
font-family: 'DM Sans', sans-serif;
font-weight: 400;
color: var(--ink);
background: var(--bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}

/* ---- Design Tokens ---- */
:root {
--bg:          #ffffff;
--bg2:         #f6f5f0;
--bg3:         #eeecea;
--ink:         #0d0d0d;
--ink2:        #4a4948;
--ink3:        #8c8b87;
--ink4:        #b5b3ae;
--border:      #e4e2da;
--border2:     #cccac3;

--green:       #2d6a4f;
--green-mid:   #40916c;
--green-light: #d8f3dc;
--green-dark:  #1b4332;
--green-border:#95d5b2;

--font-head:   'Inter', sans-serif;
--font-body:   'DM Sans', sans-serif;

--radius-sm:   6px;
--radius-md:   10px;
--radius-lg:   14px;
--radius-xl:   20px;

--transition:  all 0.2s ease;
}

/* ---- Typography ---- */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; color: var(--ink); letter-spacing: -0.03em; line-height: 1.1; }
h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; }
h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 700; }
h3 { font-size: clamp(18px, 2.5vw, 24px); }
h4 { font-size: 16px; letter-spacing: -0.01em; }
p  { color: var(--ink2); line-height: 1.65; }
a  { color: inherit; text-decoration: none; }

.section-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--ink3);
margin-bottom: 14px;
display: block;
}

/* ---- Layout ---- */
.container { max-width: 1160px; margin: 0 auto; padding: 0 40px; }
.section    { padding: 80px 0; }
.section-sm { padding: 52px 0; }

/* ---- Navigation ---- */
.nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
}
.nav__logo {
font-family: var(--font-head);
font-size: 30px;
font-weight: 800;
letter-spacing: -0.5px;
color: var(--ink);
}
.nav__logo em { font-style: normal; color: var(--green); }
.nav__links {
display: flex;
gap: 32px;
list-style: none;
}
.nav__links a {
font-size: 14px;
font-weight: 500;
color: var(--ink2);
transition: var(--transition);
}
.nav__links a:hover,
.nav__links a.active { color: var(--ink); }
.nav__actions { display: flex; gap: 10px; align-items: center; }

/* ---- Buttons ---- */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
border-radius: var(--radius-md);
padding: 11px 22px;
cursor: pointer;
border: none;
transition: var(--transition);
text-decoration: none;
white-space: nowrap;
}
.btn-primary {
background: var(--ink);
color: #fff;
}
.btn-primary:hover { background: #222; transform: translateY(-1px); }

.btn-secondary {
background: transparent;
color: var(--ink);
border: 1px solid var(--border2);
}
.btn-secondary:hover { border-color: var(--ink); background: var(--bg2); }

.btn-green {
background: var(--green);
color: #fff;
}
.btn-green:hover { background: var(--green-dark); transform: translateY(-1px); }

.btn-sm { padding: 7px 16px; font-size: 13px; }
.btn-lg { padding: 14px 30px; font-size: 15px; }

/* ---- Badges ---- */
.badge {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 500;
padding: 3px 10px;
border-radius: 20px;
}
.badge-green  { background: var(--green-light); color: var(--green-dark); }
.badge-blue   { background: #dbeafe; color: #1e40af; }
.badge-gray   { background: var(--bg2); color: var(--ink2); border: 1px solid var(--border); }
.badge-new    { background: #dbeafe; color: #1e3a8a; }

/* ---- Tags ---- */
.tag {
display: inline-block;
background: var(--bg2);
color: var(--ink2);
font-size: 11.5px;
padding: 3px 10px;
border-radius: 8px;
}

/* ---- Cards ---- */
.card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
transition: var(--transition);
}
.card:hover {
border-color: var(--border2);
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(0,0,0,0.07);
}
.card.featured { border-color: var(--green-border); }

/* ---- Product Card ---- */
.product-card { cursor: pointer; overflow: hidden; }
.product-card__top    { padding: 22px 22px 14px; }
.product-card__icon   {
width: 44px; height: 44px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
margin-bottom: 14px;
}
.product-card__icon--t-amber  { background: #fef3c7; }
.product-card__icon--t-blue   { background: #dbeafe; }
.product-card__icon--t-pink   { background: #fce7f3; }
.product-card__icon--t-mint   { background: #d1fae5; }
.product-card__icon--t-violet { background: #ede9fe; }
.product-card__icon--t-orange { background: #ffedd5; }
.product-card__icon--t-yellow { background: #fef9c3; }
.product-card__icon--t-pale   { background: #f0fdf4; }

.is-hidden { display: none !important; }

.form-input--invalid { border-color: var(--green) !important; }
.form-input--error { border-color: #dc2626 !important; }

.empty-state__icon { margin: 0 auto 14px; display: block; }
.product-card__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.product-card__name   { font-family: var(--font-head); font-size: 16px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 6px; }
.product-card__desc   { font-size: 13px; color: var(--ink2); line-height: 1.55; font-weight: 300; margin-bottom: 12px; }
.product-card__tags   { display: flex; gap: 5px; flex-wrap: wrap; }
.product-card__footer {
padding: 12px 22px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.product-card__price      { font-size: 14px; font-weight: 500; color: var(--ink); }
.product-card__price span { font-size: 11px; color: var(--ink3); font-weight: 400; }

/* ---- Feature Check List ---- */
.feature-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.feature-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
color: var(--ink2);
font-weight: 300;
}
.feature-list__check {
width: 20px; height: 20px;
border-radius: 50%;
background: var(--green-light);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.feature-list__check svg { width: 10px; height: 10px; }

/* ---- Steps ---- */
.steps { display: flex; flex-direction: column; }
.step  {
display: flex;
gap: 18px;
padding: 20px 0;
border-bottom: 1px solid var(--border);
}
.step:last-child { border-bottom: none; }
.step__num {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--ink);
color: #fff;
font-family: var(--font-head);
font-size: 14px;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.step__title { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.step__desc  { font-size: 13px; color: var(--ink2); line-height: 1.55; font-weight: 300; }

/* ---- Pricing Plans ---- */
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 26px;
position: relative;
}
.plan.popular { border: 2px solid var(--green); }
.plan__badge {
position: absolute;
top: -11px; left: 50%;
transform: translateX(-50%);
background: var(--green);
color: #fff;
font-size: 10px; font-weight: 600;
padding: 3px 14px;
border-radius: 20px;
white-space: nowrap;
}
.plan__name  { font-family: var(--font-head); font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.plan__desc  { font-size: 12.5px; color: var(--ink3); margin-bottom: 20px; line-height: 1.5; }
.plan__price { margin-bottom: 20px; }
.plan__amount{ font-family: var(--font-head); font-size: 34px; font-weight: 800; }
.plan__period{ font-size: 13px; color: var(--ink3); margin-left: 4px; }
.plan__setup { font-size: 11.5px; color: var(--ink3); margin-top: 4px; }
.plan__features {
list-style: none;
display: flex; flex-direction: column;
gap: 9px;
margin-bottom: 24px;
}
.plan__features li {
font-size: 13px; color: var(--ink2);
display: flex; align-items: center; gap: 8px;
}
.plan__features li svg { flex-shrink: 0; color: var(--green); }
.plan__btn {
width: 100%;
padding: 11px;
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 13.5px; font-weight: 500;
cursor: pointer;
border: 1px solid var(--border2);
background: transparent;
color: var(--ink);
transition: var(--transition);
}
.plan__btn:hover { border-color: var(--ink); background: var(--bg2); }
.plan.popular .plan__btn {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.plan.popular .plan__btn:hover { background: #222; }

/* ---- FAQ ---- */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
cursor: pointer;
font-size: 14px; font-weight: 500;
color: var(--ink);
gap: 16px;
}
.faq__question:hover { color: var(--green); }
.faq__icon {
width: 22px; height: 22px;
border-radius: 50%;
border: 1px solid var(--border2);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: transform 0.2s;
}
.faq__item.open .faq__icon { transform: rotate(45deg); }
.faq__answer {
font-size: 13.5px; color: var(--ink2);
line-height: 1.65; font-weight: 300;
padding-bottom: 18px;
display: none;
}
.faq__item.open .faq__answer { display: block; }

/* ---- Form ---- */
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 12px; font-weight: 500; color: var(--ink2); margin-bottom: 6px; }
.form-input,
.form-select,
.form-textarea {
width: 100%;
background: var(--bg);
border: 1px solid var(--border2);
border-radius: var(--radius-md);
padding: 10px 14px;
font-family: var(--font-body);
font-size: 13.5px;
color: var(--ink);
outline: none;
transition: border-color 0.2s;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus { border-color: var(--ink); }
.form-select { appearance: none; cursor: pointer; }
.form-textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.form-submit {
width: 100%;
background: var(--ink);
color: #fff;
border: none;
padding: 13px;
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 14px; font-weight: 500;
cursor: pointer;
transition: var(--transition);
margin-top: 6px;
}
.form-submit:hover { background: #222; }
.form-note { font-size: 11px; color: var(--ink3); margin-top: 10px; text-align: center; line-height: 1.5; }

/* ---- Success State ---- */
.success-state {
display: none;
text-align: center;
padding: 40px 20px;
}
.success-state.show { display: block; }
.success-state__icon {
width: 52px; height: 52px;
border-radius: 50%;
background: var(--green-light);
margin: 0 auto 16px;
display: flex; align-items: center; justify-content: center;
}
.success-state__title { font-family: var(--font-head); font-size: 20px; margin-bottom: 8px; }
.success-state__text  { font-size: 14px; color: var(--ink2); line-height: 1.6; font-weight: 300; }

/* ---- Footer ---- */
.footer {
background: var(--ink);
color: rgba(255,255,255,0.6);
padding: 56px 0 32px;
}
.footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 48px;
}
.footer__logo {
font-family: var(--font-head);
font-size: 20px; font-weight: 800;
color: #fff;
letter-spacing: -0.5px;
margin-bottom: 12px;
}
.footer__logo em { font-style: normal; color: var(--green-light); }
.footer__tagline { font-size: 13px; line-height: 1.6; font-weight: 300; max-width: 260px; }
.footer__col-title { font-size: 12px; font-weight: 500; color: #fff; margin-bottom: 14px; letter-spacing: 0.5px; }
.footer__links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer__links a { font-size: 13px; color: rgba(255,255,255,0.5); transition: color 0.2s; }
.footer__links a:hover { color: #fff; }
.footer__bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
}

/* ---- Utility ---- */
.text-green  { color: var(--green); }
.text-muted  { color: var(--ink2); }
.text-hint   { color: var(--ink3); }
.fw-300      { font-weight: 300; }
.fw-500      { font-weight: 500; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-4  { margin-bottom: 4px; }
.mb-6  { margin-bottom: 6px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-40 { margin-bottom: 40px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.flex   { display: flex; }
.flex-center { display: flex; align-items: center; }

.flex-between { display: flex; align-items: center; justify-content: space-between; }
.align-items-end { align-items: flex-end; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ---- Animations ---- */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to   { opacity: 1; transform: translateY(0); }
}
.animate-fadeup { animation: fadeUp 0.5s ease forwards; }
.delay-1 { animation-delay: 0.1s; opacity: 0; }
.delay-2 { animation-delay: 0.2s; opacity: 0; }
.delay-3 { animation-delay: 0.3s; opacity: 0; }
.delay-4 { animation-delay: 0.4s; opacity: 0; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
.container { padding: 0 24px; }
.nav__links { gap: 20px; }
.plans-grid { grid-template-columns: 1fr; max-width: 380px; }
.footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.nav__links { display: none; }
.section  { padding: 52px 0; }
.grid-2,
.grid-3   { grid-template-columns: 1fr; }
.footer__grid { grid-template-columns: 1fr; }
.footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
}


/* ============================================
Semantic (ex-inline layout hooks)
============================================ */
.hero.hero--pb-lg.section { padding-bottom: 64px; }

.grid-mini-services {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
@media (max-width: 1024px) {
.grid-mini-services { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
.grid-mini-services { grid-template-columns: 1fr !important; }
.cta-split { grid-template-columns: 1fr !important; }
}

.cta-split {
display: grid;
grid-template-columns: 1fr 420px;
gap: 60px;
align-items: center;
}

/* ============================================
Migrated from HTML style="" attributes
============================================ */
.u-02395c1c9f { font-family:var(--font-head); font-size:32px; font-weight:800; color:var(--green); }
.u-02cade72fd { text-align:center; max-width:560px; }
.u-032ec71fb1 { background:#fee2e2; }
.u-038742a3df { font-size:12px; color:var(--ink3); margin-top:2px; }
.u-0410e99f3b { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.u-0512ff716e { font-size:11px; font-weight:500; color:var(--green-dark); letter-spacing:.8px; text-transform:uppercase; margin-bottom:6px; }
.u-0583d1e2d6 { background:linear-gradient(135deg,#fee2e2,#fca5a5); }
.u-0746c9972d { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.15); color:#fff; }
.u-077966c3e6 { width:85%; height:8px; background:var(--green-mid); border-radius:4px; margin:0 auto 8px; opacity:.5; }
.u-086f178827 { display:flex; gap:0; border-top:1px solid var(--border); margin:0 -22px; padding:0 22px; }
.u-094202ff16 { width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; flex-shrink:0; }
.u-0e15d85f3b { min-height:120px; }
.u-0e49e1b3e1 { font-size:13px; font-weight:500; }
.u-0eb289df4f { width:80px; height:28px; background:var(--green-dark); border-radius:6px; }
.u-0fa4f29aca { font-size:14px; color:var(--ink); line-height:1.7; font-style:italic; font-weight:300; margin-bottom:12px; }
.u-1211201084 { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-xl); padding:28px; }
.u-1218ede9de { display:flex; flex-direction:column; gap:12px; margin-bottom:36px; }
.u-1265ee1ffc { margin-bottom:32px; }
.u-1429a5fba5 { display:flex; gap:10px; align-items:center; padding:10px 12px; background:var(--green-light); border:1px solid var(--green-border); border-radius:var(--radius-md); }
.u-14746e5884 { font-size:14px; font-weight:300; margin-bottom:28px; max-width:340px; }
.u-157a9c702f { margin-bottom:14px; }
.u-16e3e9c641 { font-size:12px; color:var(--ink3); margin-top:1px; }
.u-17487e363b { max-width: 700px; margin-bottom: 20px; }
.u-184688d920 { background:#fafaf0; }
.u-192030bca3 { width:100%; aspect-ratio:16/9; background:linear-gradient(135deg,#fef3c7,#fde68a); border-radius:var(--radius-lg) var(--radius-lg) 0 0; display:flex; align-items:center; justify-content:center; font-size:44px; }
.u-195ee0e186 { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.u-1a58b88603 { text-decoration:none; display:flex; flex-direction:column; }
.u-1b053b3909 { gap:60px; align-items:flex-start; }
.u-1c672d83e6 { display:flex; gap:2px; color:#f59e0b; font-size:13px; margin-bottom:6px; }
.u-1efd749192 { margin-top:16px; }
.u-1f2d5a8602 { font-size:13px; color:var(--ink3); margin-top:3px; }
.u-1f3ec8e6cb { padding:20px; }
.u-212feeec5c { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); color:#fff; min-height:72px; }
.u-2280c163ee { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-md); }
.u-2447f692de { display:flex; justify-content:space-between; align-items:center; }
.u-25aea119f3 { margin-bottom:6px; }
.u-25db4b0186 { font-size:13px; font-weight:500; color:var(--ink2); margin-bottom:16px; }
.u-26b9923420 { font-size:11px; color:var(--green); font-weight:500; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.u-27147da4f7 { width:8px; height:8px; border-radius:50%; background:#ff6058; }
.u-27e9acba9d { font-size:12px; color:var(--green-dark); margin-top:3px; }
.u-29286f801a { display:flex; gap:10px; align-items:center; font-size:13px; color:var(--ink2); }
.u-29d7c35215 { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-md); }
.u-29f6e6fdcf { text-decoration:none; display:flex; flex-direction:column; }
.u-29fd9bcf4e { gap:12px; margin-bottom:28px; }
.u-29fe0e90f6 { width:48px; height:48px; border-radius:var(--radius-md); background:#d8f3dc; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; }
.u-2aebfc4583 { display:flex; flex-wrap:wrap; gap:6px; }
.u-2b9938b5a8 { font-size:13px; color:rgba(255,255,255,.6); }
.u-2c457809e0 { font-family:var(--font-head); font-size:22px; font-weight:800; }
.u-2c458bc5c7 { color:#fff; border-color:rgba(255,255,255,.25); }
.u-2d17c59b7f { color:#fff; margin-bottom:14px; }
.u-2d5cd9558b { background:linear-gradient(135deg,#f0f9ff,#bae6fd); }
.u-2dd4a1eaa3 { text-decoration:none; display:flex; flex-direction:column; overflow:hidden; }
.u-2dfa3c0730 { display:flex; flex-direction:column; gap:12px; }
.u-2ebfa699fb { margin-left:auto; font-size:11px; color:var(--green); font-weight:500; }
.u-30a5aa6a6e { color:#fff; border-color:rgba(255,255,255,0.25); }
.u-30d22b94ca { font-size:17px; max-width:560px; font-weight:300; margin-bottom:36px; }
.u-30e4be8cce { font-size:12px; color:var(--ink3); margin-top:12px; text-align:center; }
.u-31000a3378 { display:flex; gap:20px; }
.u-345abd4cf6 { display:grid; grid-template-columns:1fr 320px; gap:64px; align-items:start; }
.u-34fcfbb6cc { font-size:13px; font-weight:700; color:#fff; font-family:var(--font-head); }
.u-36142928b4 { color:#ef4444; flex-shrink:0; }
.u-374d088dda { font-size:17px; max-width:520px; font-weight:300; }
.u-37b40f6502 { font-size:52px; margin-bottom:8px; }
.u-383be34f8b { gap:32px; align-items:center; }
.u-3894096540 { aspect-ratio:16/9; background:linear-gradient(135deg,#fef3c7,#fde68a); display:flex; align-items:center; justify-content:center; font-size:44px; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.u-3a403ad20a { aspect-ratio:16/9; background:linear-gradient(135deg,#ede9fe,#c4b5fd); display:flex; align-items:center; justify-content:center; font-size:44px; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.u-3a7bdd5c81 { color:var(--green); flex-shrink:0; }
.u-3b64752de0 { gap:20px; margin-bottom:48px; }
.u-3b6fff87a0 { display:flex; align-items:center; gap:10px; }
.u-3be276fa4a { width:28px; height:5px; background:rgba(255,255,255,.3); border-radius:3px; }
.u-3f4a278831 { font-size:13px; color:var(--ink2); font-weight:300; line-height:1.55; }
.u-3f761ffdfb { font-size:10px; color:var(--ink3); }
.u-4093a657d5 { padding:12px; text-align:center; }
.u-41ec3308b9 { margin-top:80px; }
.u-431fcbb72d { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-xl); padding:24px; }
.u-4360e19152 { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; display:flex; gap:16px; align-items:flex-start; }
.u-43eacd3fae { padding:20px 22px; }
.u-443780b03e { padding:7px; text-align:center; font-size:12px; background:var(--green); border-radius:6px; color:#fff; font-weight:500; }
.u-445c2f50c8 { font-size:12px; font-weight:500; margin-bottom:8px; }
.u-44f71c4fd4 { display:flex; align-items:center; gap:20px; }
.u-466bcdbe00 { width:60%; height:8px; background:var(--green-mid); border-radius:4px; margin:0 auto 8px; opacity:.7; }
.u-47a8f21cc5 { font-size:18px; flex-shrink:0; }
.u-4b87029b9f { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; display:flex; gap:16px; align-items:flex-start; }
.u-4c29c000e1 { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); color:#fff; }
.u-4c34ab2db2 { font-size:13px; color:rgba(255,255,255,.5); text-decoration:line-through; }
.u-4cbb44c258 { display:flex; gap:32px; margin-top:32px; padding-top:28px; border-top:1px solid var(--border); }
.u-4da4b20d6e { width:36px; height:36px; border-radius:8px; background:var(--green-light); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.u-4e96f894ff { padding:12px; text-align:center; border-right:1px solid var(--border); }
.u-5108ac2b63 { display:flex; gap:12px; }
.u-51c9f7d131 { font-family:var(--font-head); font-size:18px; font-weight:700; }
.u-53463d6d87 { margin-bottom:12px; }
.u-539b047e86 { text-align:center; }
.u-5485abfb32 { background:linear-gradient(135deg,#dbeafe,#93c5fd); }
.u-5522c4465f { font-size:17px; max-width:520px; margin-bottom:36px; font-weight:300; }
.u-5534b3b36a { margin-bottom:16px; }
.u-55baa0671d { font-size:11px; color:var(--ink3); margin-left:8px; }
.u-5724e7e396 { width:48px; height:48px; border-radius:var(--radius-md); background:#fef3c7; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; }
.u-58764208df { font-family:var(--font-head); font-size:17px; font-weight:700; margin-bottom:8px; letter-spacing:-0.3px; }
.u-5b5bffbbba { background:#d8f3dc; }
.u-5b7c75ca7d { width:68px; height:68px; border-radius:var(--radius-xl); background:#d8f3dc; display:flex; align-items:center; justify-content:center; font-size:32px; margin-bottom:20px; }
.u-5c4feba4a5 { display:flex; gap:8px; justify-content:center; }
.u-5eae2bb838 { font-size:12px; color:var(--green-dark); font-weight:300; }
.u-5edb34162a { align-items:center; gap:80px; }
.u-5f95e671e5 { font-size:11px; color:var(--green); font-weight:500; letter-spacing:1px; text-transform:uppercase; margin-bottom:4px; }
.u-5fb29ff337 { font-size:14px; font-weight:300; margin-bottom:32px; }
.u-607a302bfb { gap:80px; align-items:flex-start; }
.u-60eb730e73 { font-family:var(--font-head); font-size:36px; font-weight:800; }
.u-61c9799eeb { font-size:16px; font-weight:300; max-width:480px; margin-bottom:28px; }
.u-6214724b44 { text-align:center; max-width:580px; }
.u-626c9c7401 { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.15); color:#fff; min-height:72px; }
.u-628520dd0a { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--ink2); }
.u-62d457051d { max-width:560px; margin-bottom:20px; }
.u-63e2698768 { background:#fce7f3; }
.u-645af799f8 { color:rgba(255,255,255,0.55); font-size:15px; font-weight:300; max-width:400px; }
.u-64d6b0f876 { font-size:13px; color:var(--ink2); font-weight:300; }
.u-6510e6eb6e { width:80px; height:28px; background:transparent; border:1px solid var(--green-mid); border-radius:6px; }
.u-663d302387 { color:rgba(255,255,255,0.6); font-size:14px; }
.u-67fcf87f02 { font-size:12px; font-weight:500; color:var(--ink2); margin-bottom:14px; text-transform:uppercase; letter-spacing:.8px; }
.u-6841118bb1 { margin-bottom:20px; }
.u-686504a85a { margin-bottom:40px; }
.u-692b1a93dd { font-size:15px; font-weight:300; line-height:1.7; }
.u-695948024b { background:linear-gradient(135deg,#fafaf0,#e5e7a0); }
.u-6bc24de56e { font-size:14px; font-weight:300; margin-bottom:36px; }
.u-6d3ca065e8 { gap:20px; margin-bottom:20px; }
.u-6d47301d5c { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.u-6e877e6643 { font-size:14px; font-weight:500; margin-bottom:3px; }
.u-6ed2782691 { background:var(--ink); border-radius:var(--radius-xl); padding:28px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.u-6f765a0cb2 { font-size:22px; margin-bottom:12px; }
.u-7061ccbec7 { color:rgba(255,255,255,0.55); font-size:15px; font-weight:300; margin-bottom:28px; }
.u-7144203c77 { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); color:rgba(255,255,255,.7); }
.u-71a7174728 { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:14px; }
.u-72b7280d86 { display:flex; flex-direction:column; gap:16px; }
.u-72f9ce0840 { font-size:11px; color:var(--ink3); margin-left:8px; flex:1; text-align:center; }
.u-73ce1ff2dc { font-size:16px; font-weight:300; max-width:520px; line-height:1.75; margin-bottom:32px; }
.u-74786351d5 { font-size:13px; color:var(--ink2); }
.u-7485ace1d5 { max-width:600px; margin-bottom:20px; }
.u-7543dc99d7 { font-size:15px; font-weight:500; margin-bottom:4px; }
.u-755810da0a { padding: 40px 0 0; border-bottom: 1px solid var(--border); }
.u-761d23e258 { font-family:var(--font-head); font-size:17px; font-weight:700; letter-spacing:-0.3px; margin-bottom:8px; color:var(--ink); }
.u-770fd3b73f { font-family:var(--font-head); font-size:20px; font-weight:800; }
.u-79943b1c5d { display:flex; flex-wrap:wrap; gap:5px; }
.u-79d4707b4b { font-size:20px; flex-shrink:0; }
.u-79ddb56e8c { aspect-ratio:16/9; background:linear-gradient(135deg,#d8f3dc,#95d5b2); display:flex; align-items:center; justify-content:center; font-size:64px; }
.u-7a54641b2e { background:var(--bg); border:1px solid var(--green-border); border-radius:var(--radius-lg); padding:28px; display:flex; flex-direction:column; gap:16px; }
.u-7abbc67a5f { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; transition:var(--transition); }
.u-7afe40fe65 { margin-bottom:24px; }
.u-7b2d159033 { font-size:13px; color:var(--ink3); margin-bottom:20px; }
.u-7c4f29f846 { padding-top:48px; }
.u-7cc4d71033 { background:var(--bg2); }
.u-7d30d5b320 { font-size:13px; font-weight:500; color:var(--green); }
.u-7da5bb5de5 { font-family:var(--font-head); font-size:28px; font-weight:800; color:var(--green); }
.u-7de8d934ca { font-size:15px; font-weight:300; margin-bottom:16px; line-height:1.7; }
.u-801732a19b { margin-bottom:28px; }
.u-816cd006b1 { display:flex; gap:12px; justify-content:center; }
.u-81ea87b5a1 { color:var(--green-dark); }
.u-829061d70d { display:flex; gap:14px; align-items:flex-start; }
.u-8308522fa2 { width:100%; aspect-ratio:16/9; background:linear-gradient(135deg,#d8f3dc,#95d5b2); border-radius:var(--radius-lg) var(--radius-lg) 0 0; display:flex; align-items:center; justify-content:center; font-size:44px; }
.u-839068bea2 { font-size:16px; line-height:1.75; color:var(--ink); font-weight:300; font-style:italic; margin-bottom:20px; }
.u-83e1e95aa6 { font-size:12px; color:var(--ink3); margin-top:3px; }
.u-84a03fc102 { color:rgba(255,255,255,.55); font-size:15px; font-weight:300; max-width:400px; margin-bottom:20px; }
.u-85941f254d { padding:7px; text-align:center; font-size:12px; background:var(--bg2); border:1px solid var(--border); border-radius:6px; }
.u-86ce2baf12 { background:#fafaf5; }
.u-883d360f37 { background:#dbeafe; }
.u-884fe5fc2c { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; margin-top:16px; }
.u-88c50ef1ad { font-size:13px; color:var(--ink2); font-weight:300; display:flex; gap:8px; align-items:flex-start; }
.u-898ad9121e { font-size:12px; color:var(--green-dark); margin-top:2px; }
.u-89c822d372 { font-size: 15px; font-weight: 300; max-width: 480px; }
.u-8aff22e108 { font-size:12px; font-weight:500; color:var(--ink2); margin-bottom:14px; }
.u-8b0ca6a33f { font-size:14px; font-weight:300; margin-bottom:28px; }
.u-8beb756815 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 10px; }
.u-8c0f5016fb { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; display:flex; flex-direction:column; gap:16px; }
.u-8c1b2f2268 { background:#ff6058; }
.u-8e0da9366d { font-family:var(--font-head); font-size:28px; font-weight:800; }
.u-8fdce8d55b { text-decoration:none; }
.u-903e43f6df { max-width:720px; }
.u-908f85657f { background:var(--bg2); border-bottom:1px solid var(--border); }
.u-90cef44362 { font-family:var(--font-head); font-size:16px; font-weight:700; margin-bottom:6px; color:var(--ink); }
.u-90ed236a1a { font-size:14px; font-weight:400; color:rgba(255,255,255,.6); }
.u-90ef330269 { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border); }
.u-9164756cc0 { width:40%; height:8px; background:var(--green-mid); border-radius:4px; margin:0 auto 16px; opacity:.3; }
.u-91e2ae8931 { margin-bottom: 32px; }
.u-92d601c4d7 { font-size:14px; font-weight:500; margin-bottom:2px; }
.u-93499f0c55 { width:32px; height:32px; border-radius:8px; background:var(--bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.u-93b8ea5b2f { display:none; }
.u-93d0dea637 { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#ede9fe,#c4b5fd); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.u-93dc8d9577 { gap:80px; align-items:center; }
.u-942fbc4d28 { font-family:var(--font-head); font-size:32px; font-weight:800; }
.u-947894644a { max-width:800px; }
.u-95e0baf625 { font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.u-96e6094246 { background:linear-gradient(135deg,#ede9fe,#c4b5fd); }
.u-970cd4d2bc { background:#ffbc2e; }
.u-9886863677 { font-size:14px; color:var(--ink2); line-height:1.7; font-weight:300; font-style:italic; }
.u-98c02a5b0c { background:var(--green-light); border-color:var(--green-border); }
.u-99820741b8 { display:flex; gap:48px; padding-top:36px; border-top:1px solid var(--border); }
.u-99d062421f { width:8px; height:8px; border-radius:50%; background:#ffbc2e; }
.u-9a771ac95d { font-size:13px; color:var(--ink3); margin-top:2px; }
.u-9b1bfe126e { font-size:13px; color:var(--ink2); font-weight:300; line-height:1.5; }
.u-9b9071cf07 { color:#fff; margin-bottom:12px; }
.u-9cc5e9cb26 { display:flex; align-items:center; gap:12px; }
.u-9cc76dc726 { font-size:11px; color:var(--green-dark); }
.u-9d5b164d19 { max-width:620px; margin-bottom:20px; }
.u-9db08092f6 { font-family:var(--font-head); font-size:17px; font-weight:700; }
.u-a03fecd85b { display:flex; gap:10px; align-items:center; padding:10px 12px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-md); opacity:.6; }
.u-a05dbd698d { border-color:var(--green-border); background:#f9fffe; }
.u-a099d2e0bb { font-size:14px; font-weight:300; margin-bottom:24px; }
.u-a0a5325f59 { display:flex; gap:48px; margin-top:56px; padding-top:40px; border-top:1px solid var(--border); }
.u-a10c5e0df3 { display:flex; flex-direction:column; gap:8px; }
.u-a170b25d6b { background:#f0f9ff; }
.u-a264dc07bb { font-size:12px; font-weight:500; margin-bottom:12px; }
.u-a2bb213f2c { border-radius:var(--radius-lg); background:var(--ink); padding:24px; }
.u-a2d48c76d3 { margin-bottom:0; }
.u-a3f4de7b42 { font-size:16px; font-weight:300; max-width:480px; margin-bottom:28px; line-height:1.7; }
.u-a695573393 { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#d8f3dc,#95d5b2); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.u-a82c93e8e3 { background:linear-gradient(135deg,#d8f3dc,#95d5b2); }
.u-aa2df4b9f9 { background:rgba(255,255,255,.1); color:rgba(255,255,255,.8); font-size:12px; padding:4px 12px; border-radius:20px; }
.u-aa4921ebb6 { display:flex; gap:32px; margin-top:36px; padding-top:28px; border-top:1px solid var(--border); }
.u-aa80947751 { flex:1; padding-top:14px; border-left:1px solid var(--border); padding-left:16px; }
.u-ab0cc1ced8 { font-size:15px; font-weight:300; margin-bottom:24px; line-height:1.7; }
.u-af1aecce10 { font-size:24px; flex-shrink:0; }
.u-af34ab517c { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-xl); padding:48px; }
.u-aff666f975 { color:var(--ink2); }
.u-b00e993bf6 { font-size:14px; font-weight:300; line-height:1.7; margin-bottom:20px; }
.u-b090dda066 { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.u-b0d4340976 { gap:48px; align-items:flex-start; }
.u-b0ddb8538d { color:rgba(255,255,255,.55); }
.u-b16e01f747 { background:#ede9fe; }
.u-b2200f293e { border-bottom:1px solid var(--border); background:var(--bg2); }
.u-b2aa0b892d { color:rgba(255,255,255,.55); font-size:15px; font-weight:300; margin-bottom:28px; }
.u-b2fca57e34 { padding:24px; }
.u-b30a488bd3 { background:var(--bg2); border-left:3px solid var(--green); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:20px 24px; }
.u-b30e2c0f40 { margin-bottom:8px; }
.u-b4228ba701 { display:flex; align-items:center; gap:12px; padding-top:8px; border-top:1px solid var(--border); margin-top:auto; }
.u-b466e2bdc6 { background:#f0fdf4; }
.u-b47713fa29 { font-family:var(--font-head); font-size:20px; font-weight:700; margin-bottom:8px; color:var(--ink); }
.u-b57ebf085b { font-size:14px; color:var(--ink2); font-weight:300; margin-bottom:28px; }
.u-b592715336 { color:#fff; }
.u-b5fa46203f { font-family:var(--font-head); font-size:28px; font-weight:800; color:#fff; }
.u-b7a8fddf3a { font-size:13px; color:var(--ink2); font-weight:300; line-height:1.6; }
.u-b874815813 { width:100%; aspect-ratio:16/9; background:linear-gradient(135deg,#d1fae5,#6ee7b7); border-radius:var(--radius-lg) var(--radius-lg) 0 0; display:flex; align-items:center; justify-content:center; font-size:44px; }
.u-b98b0e3196 { padding:18px 20px; }
.u-ba1ff4b67c { display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }
.u-ba5c496bfc { flex:2; }
.u-bc3c90d3df { padding:20px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); text-align:center; }
.u-bd9671dca2 { text-align:center; max-width:600px; }
.u-bdc6a125c9 { font-size:16px; font-weight:300; max-width:500px; line-height:1.75; margin-bottom:28px; }
.u-be247a41ed { padding:20px; background:var(--green-light); border:1px solid var(--green-border); border-radius:var(--radius-lg); text-align:center; }
.u-be3b03e31d { width:48px; height:48px; border-radius:var(--radius-md); background:#ede9fe; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; }
.u-c0793389d9 { list-style:none; display:flex; flex-direction:column; gap:10px; }
.u-c1202c6201 { font-family:var(--font-head); font-size:16px; font-weight:700; margin-bottom:6px; }
.u-c136ba0fbe { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#fef3c7,#fde68a); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.u-c157e3cea5 { justify-content:center; }
.u-c1e1c88d2a { gap:64px; align-items:flex-start; }
.u-c30f9b061f { font-family:var(--font-head); font-size:20px; font-weight:700; color:#fff; margin-bottom:4px; }
.u-c58d5bea11 { margin-bottom:10px; }
.u-c7b9350332 { background:#fff7ed; }
.u-c92e4c5881 { background:linear-gradient(135deg,#fef3c7,#fde68a); }
.u-c93f5c882b { font-family:var(--font-head); font-size:16px; font-weight:800; color:var(--green); }
.u-c947883971 { font-family:var(--font-head); font-size:18px; font-weight:700; letter-spacing:-.3px; color:var(--ink); }
.u-ca21481f00 { font-family:var(--font-head); font-size:16px; font-weight:800; }
.u-cb2b02200f { gap:20px; margin-top:20px; }
.u-cb5eaae080 { font-size:12px; color:var(--ink3); text-align:center; margin-bottom:24px; }
.u-cc861f3520 { font-size:13px; color:var(--green-dark); margin-top:4px; }
.u-cd1d679a64 { display:flex; flex-direction:column; gap:10px; }
.u-cd912c70aa { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; }
.u-cdaa188e11 { display:flex; }
.u-ce40e4f4ab { opacity:.65; }
.u-ce47a03986 { border-bottom:1px solid var(--border); }
.u-cf353461e9 { background:#d1fae5; }
.u-cf5a7accf1 { width:100%; justify-content:center; }
.u-cfb6c12e15 { color:var(--green); }
.u-d04a63f369 { background:var(--green-light); border:1px solid var(--green-border); border-radius:var(--radius-xl); padding:20px; transition:var(--transition); }
.u-d14b9961fe { font-size:12px; color:var(--ink3); }
.u-d2c653b937 { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-xl); padding:36px; }
.u-d3d73ed216 { aspect-ratio:16/9; background:linear-gradient(135deg,#d1fae5,#6ee7b7); display:flex; align-items:center; justify-content:center; font-size:44px; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.u-d4419211cb { font-size:11px; color:var(--ink3); margin-left:10px; }
.u-d4473e0c78 { gap:12px; margin-bottom:12px; }
.u-d47692a3cd { background:#28c840; }
.u-d4a87f3d73 { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#d1fae5,#6ee7b7); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.u-d532d9139e { font-size:12px; color:var(--ink3); font-weight:300; }
.u-d5e8c5f3e5 { flex:1; }
.u-da55427be7 { font-size:11px; font-weight:500; letter-spacing:1px; text-transform:uppercase; color:var(--green); margin-bottom:6px; }
.u-da7d987f27 { text-decoration:none; color:inherit; }
.u-dc9a739f16 { font-size:13px; font-weight:500; color:rgba(255,255,255,.7); margin-bottom:12px; }
.u-dce43278d4 { font-size:14px; font-weight:500; }
.u-dd7e28065e { font-size:16px; }
.u-ddc7687c66 { height:1px; background:var(--border); }
.u-ddf9f9a4d0 { max-width:640px; margin-bottom:20px; }
.u-dfbc001dfd { font-size:12.5px; color:var(--green-mid); font-weight:300; line-height:1.55; }
.u-e0cd887da8 { font-size:17px; max-width:480px; font-weight:300; }
.u-e14dd3fd93 { font-size:13px; color:var(--ink2); line-height:1.65; font-weight:300; font-style:italic; margin-bottom:10px; }
.u-e215155479 { font-size:18px; }
.u-e2a76cef72 { font-size:11px; color:var(--ink3); }
.u-e7b54066a7 { font-size:13px; color:var(--ink2); font-weight:300; line-height:1.6; margin-bottom:16px; }
.u-ea083579a8 { padding:7px; text-align:center; font-size:12px; background:var(--bg2); border:1px solid var(--border); border-radius:6px; color:var(--ink3); }
.u-ea4f71611b { margin-left:auto; display:flex; gap:2px; color:#f59e0b; }
.u-ebe42abe49 { background:var(--ink); color:#fff; text-align:center; padding:11px; border-radius:var(--radius-md); font-size:13px; font-weight:500; }
.u-ededfbc87b { background:linear-gradient(135deg,#d8f3dc,#95d5b2); padding:32px; text-align:center; }
.u-ee096b27d3 { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:6px; }
.u-ee5df96f77 { width:8px; height:8px; border-radius:50%; background:#28c840; }
.u-eedf9f26be { max-width:860px; }
.u-ef2288f1dc { font-size:13px; color:rgba(255,255,255,.6); display:flex; gap:10px; align-items:center; }
.u-f2967309bc { font-size:13px; color:var(--ink2); font-weight:300; line-height:1.55; margin-bottom:16px; }
.u-f2eab3fe97 { padding:20px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-md); display:flex; gap:12px; align-items:flex-start; }
.u-f30db8f4e7 { display:flex; gap:2px; color:#f59e0b; font-size:15px; }
.u-f449a2fac5 { background:#fef3c7; }
.u-f44c2589c1 { align-self:flex-start; }
.u-f47b8a131b { font-size:14px; font-weight:500; margin-bottom:4px; }
.u-f4b5b1cc26 { font-size:15px; font-weight:300; margin-bottom:36px; }
.u-f4be5520e1 { background:var(--ink); }
.u-f4e854da15 { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#d8f3dc,#95d5b2); display:flex; align-items:center; justify-content:center; font-size:22px; }
.u-f658db21c5 { background:linear-gradient(135deg,#d1fae5,#6ee7b7); }
.u-f7036d5db6 { width:60px; height:22px; background:var(--green); border-radius:5px; }
.u-f75767b600 { padding-top:40px; padding-bottom:40px; }
.u-f7f727d75d { text-align:center; padding:10px; font-size:13px; color:var(--green); font-weight:500; text-decoration:none; }
.u-f7f805037e { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#fafaf0,#e5e7a0); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.u-f81cccc605 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px; }
.u-fa0fd08739 { font-size:13px; color:var(--green); font-weight:500; }
.u-fa27cf8a34 { font-family:var(--font-head); font-size:17px; font-weight:700; margin-bottom:8px; }
.u-fa38831841 { flex:1; padding-top:14px; }
.u-face642ac8 { color:rgba(255,255,255,0.55); }
.u-fd16cb348a { display:flex; gap:16px; margin-top:24px; }
.u-fe99a18fad { margin:0 auto 14px; display:block; }
.u-fedf27d071 { color:rgba(255,255,255,0.4); font-size:12px; }

/* ============================================
Migrated from HTML <style> blocks
============================================ */
/* ---- embedded: about.html ---- */
.page-hero {
    padding: 64px 0 56px;
    border-bottom: 1px solid var(--border);
}
.team-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
}
.team-card:hover {
    border-color: var(--border2);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.07);
}
.team-card__avatar {
    width: 100%;
    aspect-ratio: 1;
    background: var(--bg2);
    display: flex; align-items: center; justify-content: center;
    font-size: 52px;
    border-bottom: 1px solid var(--border);
}
.team-card__info { padding: 18px 20px; }
.team-card__name { font-family: var(--font-head); font-size: 17px; font-weight: 700; margin-bottom: 3px; }
.team-card__role { font-size: 12px; color: var(--green); font-weight: 500; margin-bottom: 8px; }
.team-card__bio  { font-size: 13px; color: var(--ink2); line-height: 1.55; font-weight: 300; }
.value-item {
    padding: 28px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.value-item__icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
}
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item {
    display: flex; gap: 24px;
    padding-bottom: 32px;
    position: relative;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: 19px; top: 40px;
    width: 2px;
    height: calc(100% - 40px);
    background: var(--border);
}
.timeline-item:last-child::before { display: none; }
.timeline-item__dot {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--border2);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-size: 11px; font-weight: 700;
    color: var(--ink2);
    flex-shrink: 0;
}
.timeline-item.active .timeline-item__dot {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
.timeline-item__year { font-size: 11px; color: var(--ink3); font-weight: 500; margin-bottom: 4px; }
.timeline-item__title { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.timeline-item__desc { font-size: 13px; color: var(--ink2); font-weight: 300; line-height: 1.55; }

/* ---- embedded: case-single.html ---- */
.breadcrumb { display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink3);margin-bottom:28px; }
.breadcrumb a { color:var(--ink3);transition:color .2s; }
.breadcrumb a:hover { color:var(--ink2); }
.breadcrumb span { color:var(--ink4); }

.case-hero { display:grid;grid-template-columns:1fr 320px;gap:64px;align-items:start; }

.metric-big {
    padding:24px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
}
.metric-big__val { font-family:var(--font-head);font-size:42px;font-weight:800;line-height:1;margin-bottom:4px; }
.metric-big__label { font-size:13px;color:var(--ink2);font-weight:300; }
.metric-big__desc { font-size:11px;color:var(--ink3);margin-top:4px; }
.metric-big.accent { border-color:var(--green-border);background:#f9fffe; }
.metric-big.accent .metric-big__val { color:var(--green); }

.block-section {
    padding:28px;
    border-radius:var(--radius-lg);
    border:1px solid var(--border);
}
.block-section__label {
    font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;
    color:var(--ink3);margin-bottom:10px;display:block;
}

.timeline-h { display:grid;grid-template-columns:repeat(4,1fr);gap:0; }
.thl-item {
    padding:20px;
    border-right:1px solid var(--border);
    position:relative;
}
.thl-item:last-child { border-right:none; }
.thl-item::after {
    content:'';position:absolute;
    top:28px;right:-1px;
    width:8px;height:8px;
    background:var(--green);border-radius:50%;
    transform:translateX(50%);
    z-index:1;
}
.thl-item:last-child::after { display:none; }
.thl-item__date { font-size:11px;color:var(--ink3);margin-bottom:4px; }
.thl-item__label { font-size:13px;font-weight:500; }
.thl-item__desc { font-size:12px;color:var(--ink2);font-weight:300;margin-top:3px;line-height:1.5; }

.quote-block {
    background:var(--bg2);
    border-left:3px solid var(--green);
    border-radius:0 var(--radius-lg) var(--radius-lg) 0;
    padding:28px 32px;
}

.case-meta-item { display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px; }
.case-meta-item:last-child { border-bottom:none; }
.case-meta-item span:first-child { color:var(--ink3); }
.case-meta-item span:last-child  { font-weight:500;color:var(--ink); }

.screen-mock {
    background:var(--bg2);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
}
.screen-mock__bar {
    background:var(--bg3);
    padding:10px 14px;
    border-bottom:1px solid var(--border);
    display:flex;gap:6px;align-items:center;
}
.screen-mock__body { padding:20px; }

@media(max-width:900px){
    .case-hero { grid-template-columns:1fr; }
    .timeline-h { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px){
    .timeline-h { grid-template-columns:1fr; }
}

/* ---- embedded: cases.html ---- */
.page-hero {
    padding: 64px 0 56px;
    border-bottom: 1px solid var(--border);
}
.case-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}
.case-card:hover {
    border-color: var(--border2);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.07);
}
.case-card.featured { border-color: var(--green-border); }
.case-card__cover {
    width: 100%;
    aspect-ratio: 16/9;
    display: flex; align-items: center; justify-content: center;
    font-size: 48px;
    flex-shrink: 0;
}
.case-card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.case-card__cat  {
    font-size: 11px; font-weight: 500; letter-spacing: 1px;
    text-transform: uppercase; color: var(--green);
}
.case-card__title {
    font-family: var(--font-head); font-size: 18px; font-weight: 700;
    letter-spacing: -0.3px; color: var(--ink);
}
.case-card__desc { font-size: 13px; color: var(--ink2); line-height: 1.6; font-weight: 300; flex: 1; }
.case-card__metrics {
    display: flex; gap: 0;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}
.case-card__metric {
    flex: 1; padding: 14px 16px;
    border-right: 1px solid var(--border);
}
.case-card__metric:last-child { border-right: none; }
.case-card__metric-val {
    font-family: var(--font-head); font-size: 20px; font-weight: 800;
    color: var(--ink); line-height: 1;
}
.case-card__metric-label {
    font-size: 11px; color: var(--ink3); margin-top: 3px; font-weight: 300;
}
.filter-tabs {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 32px;
}
.filter-tab {
    padding: 7px 18px;
    border-radius: 20px;
    font-size: 13px; font-weight: 500;
    border: 1px solid var(--border2);
    background: transparent;
    color: var(--ink2);
    cursor: pointer;
    transition: var(--transition);
}
.filter-tab.active,
.filter-tab:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.grid-2-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.grid-2-3 .case-card:first-child {
    grid-column: span 2;
}
@media (max-width: 1024px) {
    .grid-2-3 { grid-template-columns: 1fr 1fr; }
    .grid-2-3 .case-card:first-child { grid-column: span 2; }
}
@media (max-width: 768px) {
    .grid-2-3, .grid-2-3 .case-card:first-child { grid-column: span 1; grid-template-columns: 1fr; }
}

/* ---- embedded: catalog.html ---- */
/* ---- Catalog-specific styles ---- */
.catalog-layout {
    display: grid;
    grid-template-columns: 224px 1fr;
    align-items: start;
}

/* Sidebar */
.sidebar {
    position: sticky;
    top: 64px;
    padding: 32px 24px 32px 0;
    border-right: 1px solid var(--border);
}
.sidebar__section { margin-bottom: 28px; }
.sidebar__section:last-child { margin-bottom: 0; }

.search-wrap { position: relative; margin-bottom: 0; }
.search-wrap svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink3); pointer-events: none; }
.search-input {
    width: 100%;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 9px 12px 9px 34px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    outline: none;
    transition: border-color 0.2s;
}
.search-input:focus { border-color: var(--border2); }

.filter-group { display: flex; flex-direction: column; gap: 2px; }
.filter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px;
    color: var(--ink2);
    transition: background 0.15s;
    user-select: none;
}
.filter-item:hover { background: var(--bg2); }
.filter-item.active { background: var(--bg2); color: var(--ink); font-weight: 500; }
.filter-item.active .fi-dot { background: var(--green); }
.fi-left { display: flex; align-items: center; gap: 8px; }
.fi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border2); flex-shrink: 0; transition: background 0.15s; }
.fi-count { font-size: 11px; color: var(--ink3); background: var(--bg3); padding: 1px 7px; border-radius: 10px; }

.platform-group { display: flex; flex-direction: column; gap: 2px; }
.platform-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px; color: var(--ink2);
    transition: background 0.15s;
    user-select: none;
}
.platform-item:hover { background: var(--bg2); }
.platform-item.active { color: var(--ink); }
.pi-check {
    width: 16px; height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--border2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.platform-item.active .pi-check { background: var(--green); border-color: var(--green); }

.price-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink3); margin-top: 8px; }
input[type="range"] { width: 100%; accent-color: var(--green); }

.sidebar__sort {
    width: 100%;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    outline: none;
    appearance: none;
    cursor: pointer;
}

.reset-btn {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px;
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--ink3);
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 4px;
}
.reset-btn:hover { border-color: var(--border2); color: var(--ink); }

/* Main */
.catalog-main { padding: 32px 0 32px 32px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.results-count { font-size: 13px; color: var(--ink2); }
.results-count strong { color: var(--ink); font-weight: 500; }

.view-toggle { display: flex; gap: 4px; }
.vt-btn {
    width: 30px; height: 30px;
    border: 1px solid var(--border);
    background: transparent;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--ink3);
    transition: all 0.15s;
}
.vt-btn.active { background: var(--bg2); color: var(--ink); border-color: var(--border2); }

.active-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; min-height: 26px; }
.af-pill {
    display: flex; align-items: center; gap: 6px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 4px 8px 4px 12px;
    font-size: 12px; color: var(--ink2);
}
.af-remove {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--border2);
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 11px;
    color: var(--ink2);
    line-height: 1;
    transition: background 0.15s;
}
.af-remove:hover { background: var(--border2); color: var(--ink); }

.products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.products-grid.list-view { grid-template-columns: 1fr; }

/* List view card override */
.products-grid.list-view .product-card { display: grid; grid-template-columns: 1fr auto; }
.products-grid.list-view .product-card__top {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px;
    border-bottom: none;
}
.products-grid.list-view .product-card__icon { flex-shrink: 0; margin-bottom: 0; font-size: 18px; }
.products-grid.list-view .product-card__body { flex: 1; min-width: 0; }
.products-grid.list-view .product-card__name { margin-bottom: 4px; }
.products-grid.list-view .product-card__tags { margin-top: 6px; }
.products-grid.list-view .product-card__footer {
    border-top: none;
    border-left: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    min-width: 140px;
    padding: 16px 20px;
}

.empty-state { text-align: center; padding: 64px 20px; color: var(--ink2); }
.empty-state h3 { font-size: 16px; font-weight: 500; margin-bottom: 8px; color: var(--ink); }
.empty-state p  { font-size: 13.5px; font-weight: 300; }

@media (max-width: 1024px) {
    .catalog-layout { grid-template-columns: 1fr; }
    .sidebar { position: static; border-right: none; border-bottom: 1px solid var(--border); padding: 24px 0; }
    .catalog-main { padding: 24px 0 0; }
    .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .products-grid { grid-template-columns: 1fr; }
}

/* ---- embedded: contact.html ---- */
.page-hero {
    padding: 64px 0 56px;
    border-bottom: 1px solid var(--border);
}
.contact-info-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: var(--transition);
}
.contact-info-card:hover {
    border-color: var(--border2);
}
.contact-info-card__icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.contact-info-card__label {
    font-size: 11px; font-weight: 500; letter-spacing: 1px;
    text-transform: uppercase; color: var(--ink3);
    margin-bottom: 4px;
}
.contact-info-card__value {
    font-size: 15px; font-weight: 500; color: var(--ink);
    margin-bottom: 3px;
}
.contact-info-card__hint {
    font-size: 12px; color: var(--ink3); font-weight: 300;
}
.contact-form-wrap {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 40px;
}
.faq-mini { margin-top: 0; }
.faq-mini .faq__question { font-size: 14px; }

/* ---- embedded: index.html ---- */
.svc-card:hover {
    border-color: var(--border2) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.07);
}
@media (max-width: 1024px) {
}
@media (max-width: 768px) {

}

/* ---- embedded: industries.html ---- */
.page-hero { padding:64px 0 56px;border-bottom:1px solid var(--border); }

.industry-card {
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    padding:32px;
    display:flex;flex-direction:column;gap:16px;
    text-decoration:none;color:inherit;
    transition:var(--transition);
    position:relative;overflow:hidden;
}
.industry-card:hover {
    border-color:var(--border2);
    transform:translateY(-4px);
    box-shadow:0 12px 36px rgba(0,0,0,.09);
}
.industry-card.featured { border-color:var(--green-border); }
.industry-card__icon {
    width:60px;height:60px;border-radius:var(--radius-lg);
    display:flex;align-items:center;justify-content:center;
    font-size:28px;flex-shrink:0;
}
.industry-card__title {
    font-family:var(--font-head);font-size:20px;font-weight:700;
    letter-spacing:-.3px;
}
.industry-card__desc {
    font-size:13px;color:var(--ink2);line-height:1.6;font-weight:300;flex:1;
}
.industry-card__tags { display:flex;flex-wrap:wrap;gap:5px; }
.industry-card__stat {
    padding-top:14px;border-top:1px solid var(--border);
    display:flex;justify-content:space-between;align-items:center;
}
.industry-card__count { font-size:12px;color:var(--ink3); }
.industry-card__arrow { font-size:16px;color:var(--ink3);transition:var(--transition); }
.industry-card:hover .industry-card__arrow { color:var(--green);transform:translateX(3px); }

.stats-bar {
    display:grid;grid-template-columns:repeat(4,1fr);
    border:1px solid var(--border);border-radius:var(--radius-lg);
    overflow:hidden;
    margin-bottom:48px;
}
.stats-bar__item {
    padding:24px;text-align:center;
    border-right:1px solid var(--border);
}
.stats-bar__item:last-child { border-right:none; }
@media(max-width:768px){
    .stats-bar { grid-template-columns:1fr 1fr; }
    .stats-bar__item:nth-child(2) { border-right:none; }
    .stats-bar__item:nth-child(3) { border-top:1px solid var(--border); }
    .stats-bar__item:nth-child(4) { border-top:1px solid var(--border);border-right:none; }
}

.grid-industries {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.grid-industries .industry-card:first-child { grid-column:span 2; }
@media(max-width:1024px){ .grid-industries { grid-template-columns:1fr 1fr; } .grid-industries .industry-card:first-child { grid-column:span 1; } }
@media(max-width:768px){ .grid-industries { grid-template-columns:1fr; } }

/* ---- embedded: industry-single.html ---- */
.breadcrumb { display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink3);margin-bottom:28px; }
.breadcrumb a { color:var(--ink3);transition:color .2s; }
.breadcrumb a:hover { color:var(--ink2); }
.breadcrumb span { color:var(--ink4); }

.ind-hero { display:grid;grid-template-columns:1fr 340px;gap:64px;align-items:start; }

.challenge-card {
    background:var(--bg2);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:22px;
    display:flex;gap:14px;
    align-items:flex-start;
}
.challenge-card__icon {
    width:40px;height:40px;border-radius:var(--radius-md);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;flex-shrink:0;
}

.svc-row {
    display:flex;gap:20px;align-items:flex-start;
    padding:24px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    transition:var(--transition);
    text-decoration:none;color:inherit;
}
.svc-row:hover { border-color:var(--border2);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.06); }
.svc-row__icon {
    width:52px;height:52px;border-radius:var(--radius-md);
    display:flex;align-items:center;justify-content:center;
    font-size:24px;flex-shrink:0;
}
.svc-row__body { flex:1; }
.svc-row__title { font-family:var(--font-head);font-size:17px;font-weight:700;margin-bottom:5px;letter-spacing:-.3px; }
.svc-row__desc { font-size:13px;color:var(--ink2);font-weight:300;line-height:1.6;margin-bottom:8px; }
.svc-row__arrow { font-size:18px;color:var(--ink3);align-self:center;flex-shrink:0;transition:var(--transition); }
.svc-row:hover .svc-row__arrow { color:var(--green);transform:translateX(3px); }

.ind-stat-card {
    padding:20px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    text-align:center;
}
.ind-stat-card.green { background:var(--green-light);border-color:var(--green-border); }

.other-ind-card {
    background:var(--bg);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:20px;
    display:flex;gap:12px;align-items:flex-start;
    text-decoration:none;color:inherit;
    transition:var(--transition);
}
.other-ind-card:hover { border-color:var(--border2);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.06); }

@media(max-width:900px){ .ind-hero { grid-template-columns:1fr; } }

/* ---- embedded: product.html ---- */
/* ---- Product-page specific ---- */
.breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--ink3);
    margin-bottom: 28px;
}
.breadcrumb a { color: var(--ink3); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--ink2); }
.breadcrumb span { color: var(--ink4); }

.product-hero {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 64px;
    align-items: start;
}

/* Preview widget */
.preview-widget {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg2);
}
.preview-widget__bar {
    background: var(--bg3);
    padding: 10px 14px;
    display: flex; align-items: center; gap: 6px;
    border-bottom: 1px solid var(--border);
}
.preview-dot { width: 8px; height: 8px; border-radius: 50%; }
.preview-widget__chat { padding: 16px; }
.chat-msg { border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.5; margin-bottom: 8px; max-width: 88%; }
.chat-msg--in  { background: var(--bg3); color: var(--ink2); border-radius: 12px 12px 12px 2px; }
.chat-msg--out { background: var(--ink); color: #fff; border-radius: 12px 12px 2px 12px; margin-left: auto; }
.chat-msg--bot { background: var(--green-light); color: var(--green-dark); border-radius: 12px 12px 12px 2px; }
.chat-input-row {
    display: flex; gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}
.chat-input-mock {
    flex: 1; background: var(--bg); border: 1px solid var(--border);
    border-radius: 6px; padding: 8px 10px;
    font-size: 12.5px; color: var(--ink3);
    font-family: var(--font-body);
}
.chat-send-btn {
    background: var(--ink); color: #fff; border: none;
    border-radius: 6px; padding: 8px 14px;
    font-size: 12px; cursor: pointer; font-family: var(--font-body);
}
.preview-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border);
}
.preview-stat {
    padding: 12px; text-align: center;
    border-right: 1px solid var(--border);
}
.preview-stat:last-child { border-right: none; }
.preview-stat__num   { font-family: var(--font-head); font-size: 18px; font-weight: 700; }
.preview-stat__label { font-size: 11px; color: var(--ink3); margin-top: 2px; }

/* Compat box */
.compat-box {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 12px;
}
.compat-box__title { font-size: 12.5px; font-weight: 500; margin-bottom: 10px; }
.compat-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink2); padding: 4px 0; }
.compat-row strong { color: var(--ink); font-weight: 500; }

.compat-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.compat-tag {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 6px; padding: 4px 10px;
    font-size: 12px; color: var(--ink2);
}

/* Apply section */
.apply-section {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 48px;
}
.apply-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}
.contact-row {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--ink2);
}
.contact-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .product-hero { grid-template-columns: 1fr; }
    .apply-grid   { grid-template-columns: 1fr; }
    .plans-grid   { grid-template-columns: 1fr; max-width: 360px; }
}

/* ---- embedded: service-single.html ---- */
.breadcrumb { display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink3);margin-bottom:28px; }
.breadcrumb a { color:var(--ink3);transition:color .2s; }
.breadcrumb a:hover { color:var(--ink2); }
.breadcrumb span { color:var(--ink4); }

.service-hero { display:grid;grid-template-columns:1fr 380px;gap:64px;align-items:start; }

.visual-box {
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    overflow:hidden;
    background:var(--bg2);
}
.visual-box__top {
    background:var(--bg3);
    padding:12px 16px;
    border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:6px;
}
.vdot { width:8px;height:8px;border-radius:50%; }
.visual-box__body { padding:24px; }
.site-mockup-row { display:flex;gap:10px;margin-bottom:10px; }
.site-mockup-block {
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    flex:1;
    display:flex;align-items:center;justify-content:center;
    font-size:11px;color:var(--ink3);
    padding:16px 8px;
    text-align:center;
}
.site-mockup-nav {
    background:var(--ink);
    border-radius:var(--radius-md);
    padding:12px 16px;
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:10px;
}
.site-mockup-hero {
    background:linear-gradient(135deg,var(--green-light),#d8f3dc);
    border-radius:var(--radius-md);
    padding:28px 16px;
    text-align:center;
    margin-bottom:10px;
}

.delivery-item {
    display:flex;gap:16px;align-items:flex-start;
    padding:18px 0;border-bottom:1px solid var(--border);
}
.delivery-item:last-child { border-bottom:none; }
.delivery-item__num {
    width:32px;height:32px;border-radius:50%;
    background:var(--bg2);border:1px solid var(--border);
    font-family:var(--font-head);font-size:13px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;color:var(--ink2);
}

.tech-pill {
    display:inline-flex;align-items:center;gap:6px;
    background:var(--bg2);border:1px solid var(--border);
    border-radius:20px;padding:5px 14px;
    font-size:12.5px;color:var(--ink2);
}

.price-row {
    display:flex;justify-content:space-between;align-items:center;
    padding:16px 20px;
    background:var(--bg);border:1px solid var(--border);
    border-radius:var(--radius-md);
    transition:var(--transition);
}
.price-row:hover { border-color:var(--border2); }
.price-row + .price-row { margin-top:8px; }

.related-svc-card {
    background:var(--bg);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:22px;
    transition:var(--transition);
}
.related-svc-card:hover { border-color:var(--border2);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.06); }

@media(max-width:900px){
    .service-hero { grid-template-columns:1fr; }
}

/* ---- embedded: services.html ---- */
.service-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.service-card:hover {
    border-color: var(--border2);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.07);
}
.service-card.accent { border-color: var(--green-border); background: #f9fffe; }
.service-card__icon {
    width: 52px; height: 52px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.service-card__title {
    font-family: var(--font-head);
    font-size: 18px; font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--ink);
}
.service-card__desc {
    font-size: 14px; color: var(--ink2);
    line-height: 1.6; font-weight: 300;
    flex: 1;
}
.service-card__list {
    list-style: none;
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 4px;
}
.service-card__list li {
    font-size: 13px; color: var(--ink2);
    display: flex; align-items: flex-start; gap: 8px; font-weight: 300;
}
.service-card__list li::before {
    content: '';
    width: 5px; height: 5px;
    background: var(--green);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .grid-4 { grid-template-columns: 1fr; } }
.page-hero {
    padding: 64px 0 56px;
    border-bottom: 1px solid var(--border);
}
.process-step {
    display: flex; gap: 20px; align-items: flex-start;
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
}
.process-step:last-child { border-bottom: none; }
.process-step__num {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--ink); color: #fff;
    font-family: var(--font-head); font-size: 15px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}