:root {
    --brand:#8A2EA6;
    --brand-dark:#63217A;
    --brand-deep:#2D2D2D;
    --accent:#B85AC9;
    --ink:#2D2D2D;
    --muted:#6F6F73;
    --soft:#F7F3F9;
    --border:#EADFF0;
    --white:#FFFFFF;
    --shadow:0 20px 55px rgba(99,33,122,.14);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    margin:0;
    color:var(--ink);
    background:#fff;
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    line-height:1.65;
}
a { text-decoration:none; }
.topbar { padding:8px 0; color:rgba(255,255,255,.86); background:#2D2D2D; }
.topbar a { color:#fff; }
.language-btn { padding:2px 10px; color:#fff; background:transparent; border:1px solid rgba(255,255,255,.35); border-radius:20px; }
.navbar { min-height:82px; }
.navbar-brand { color:var(--brand-dark); line-height:1.1; }
.brand-logo { width:92px; height:64px; object-fit:contain; object-position:left center; }
.brand-text strong { display:block; color:#2D2D2D; font-size:1.03rem; }
.brand-text small { color:#777; font-size:.75rem; }
.nav-link { margin:0 5px; color:#353535; font-weight:600; }
.nav-link:hover,.nav-link.active { color:var(--brand); }
.btn-brand { color:#fff; background:var(--brand); border-color:var(--brand); }
.btn-brand:hover { color:#fff; background:var(--brand-dark); border-color:var(--brand-dark); }
.btn-outline-brand { color:var(--brand); border:1px solid var(--brand); }
.btn-outline-brand:hover { color:#fff; background:var(--brand); }
.page-hero {
    padding:105px 0;
    color:#fff;
    background:
        radial-gradient(circle at 85% 15%,rgba(255,255,255,.18),transparent 25%),
        linear-gradient(125deg,#2D2D2D 0%,#63217A 50%,#8A2EA6 100%);
}
.page-hero h1 { max-width:800px; margin:0 0 18px; font-size:clamp(2.5rem,5vw,4.8rem); font-weight:800; line-height:1.05; letter-spacing:-.04em; }
.page-hero p { max-width:720px; margin:0; color:rgba(255,255,255,.82); font-size:1.1rem; }
.section-padding { padding:95px 0; }
.soft-section { background:var(--soft); }
.section-kicker { display:inline-block; margin-bottom:12px; color:var(--accent); font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.product-detail-card,.content-panel,.action-panel,.payment-card,.security-panel,.portal-login-card,.portal-services,.contact-info-panel,.contact-form-card {
    height:100%;
    padding:34px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:22px;
    box-shadow:0 13px 35px rgba(99,33,122,.07);
}
.product-detail-card h2,.content-panel h2,.action-panel h2,.payment-card h2,.contact-info-panel h2,.contact-form-card h2 { color:var(--brand-dark); font-size:1.55rem; font-weight:800; }
.product-detail-card p,.content-panel p,.payment-card p,.contact-info-panel p,.contact-form-card p { color:var(--muted); }
.product-detail-card ul { min-height:112px; padding-left:20px; color:#5f5f64; }
.plan-icon { display:grid; width:58px; height:58px; margin-bottom:20px; color:var(--brand); background:#F4EAF7; border-radius:16px; place-items:center; font-size:1.4rem; }
.notice-box { display:flex; gap:15px; padding:22px; color:#5e4a64; background:#FAF5FC; border:1px solid var(--border); border-radius:16px; }
.notice-box i { color:var(--brand); font-size:1.3rem; }
.process-card { position:relative; height:100%; padding:30px; background:#fff; border:1px solid var(--border); border-radius:20px; }
.process-card > span { position:absolute; right:20px; top:15px; color:#eadcf0; font-size:2rem; font-weight:800; }
.process-card > i { margin-bottom:18px; color:var(--brand); font-size:1.8rem; }
.process-card h3 { color:var(--brand-dark); font-size:1.1rem; font-weight:800; }
.process-card p { margin:0; color:var(--muted); }
.claim-type-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; margin-top:24px; }
.claim-type-grid a { display:flex; padding:20px; color:#333; background:var(--soft); border:1px solid var(--border); border-radius:16px; align-items:center; gap:13px; font-weight:700; }
.claim-type-grid i { color:var(--brand); font-size:1.25rem; }
.check-list { display:grid; gap:9px; padding-left:20px; }
.service-action { display:flex; padding:18px 0; color:#333; border-bottom:1px solid var(--border); align-items:center; gap:16px; }
.service-action:last-child { border-bottom:0; }
.service-action i { display:grid; width:48px; height:48px; color:var(--brand); background:#F4EAF7; border-radius:14px; place-items:center; }
.service-action strong,.service-action small { display:block; }
.service-action small { color:var(--muted); }
.form-control,.form-select { min-height:49px; border-color:var(--border); border-radius:12px; }
.security-panel > i { color:var(--brand); font-size:3rem; }
.security-panel h3,.portal-services h3 { margin-top:20px; color:var(--brand-dark); font-weight:800; }
.security-panel ul { display:grid; gap:10px; padding-left:20px; color:#5f5f64; }
.payment-methods { display:flex; flex-wrap:wrap; gap:8px; margin-top:25px; }
.payment-methods span { padding:7px 12px; color:var(--brand); background:#F4EAF7; border-radius:18px; font-size:.84rem; font-weight:700; }
.portal-login-card { text-align:center; }
.portal-logo { width:145px; max-height:95px; object-fit:contain; margin-bottom:18px; }
.portal-login-card h2 { color:var(--brand-dark); font-weight:800; }
.portal-login-card form { margin-top:28px; text-align:left; }
.portal-note { margin:18px 0 0; color:var(--muted); font-size:.82rem; }
.portal-services { display:grid; gap:3px; }
.portal-services > div { display:flex; padding:17px 0; border-bottom:1px solid var(--border); align-items:center; gap:15px; font-weight:600; }
.portal-services > div:last-child { border-bottom:0; }
.portal-services i { width:28px; color:var(--brand); font-size:1.2rem; }
.contact-line { display:flex; padding:20px 0; border-bottom:1px solid var(--border); gap:16px; }
.contact-line i { display:grid; width:46px; height:46px; color:var(--brand); background:#F4EAF7; border-radius:14px; place-items:center; }
.contact-line strong,.contact-line span { display:block; }
.contact-line span { color:var(--muted); }
.site-footer { padding:78px 0 24px; color:rgba(255,255,255,.72); background:#242124; }
.footer-logo { width:120px; max-height:90px; object-fit:contain; background:#fff; border-radius:8px; }
.site-footer h4 { color:#fff; margin-bottom:16px; font-size:.95rem; font-weight:800; }
.site-footer a { display:block; margin:8px 0; color:rgba(255,255,255,.7); }
.site-footer a:hover { color:#fff; }
.footer-bottom { display:flex; margin-top:46px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); justify-content:space-between; gap:18px; font-size:.86rem; }
.back-to-top { position:fixed; right:22px; bottom:22px; z-index:20; display:none; width:46px; height:46px; color:#fff; background:var(--brand); border:0; border-radius:50%; box-shadow:0 12px 30px rgba(0,0,0,.2); }
.back-to-top.show { display:block; }

@media (max-width:767.98px) {
    .page-hero { padding:76px 0; }
    .section-padding { padding:70px 0; }
    .claim-type-grid { grid-template-columns:1fr; }
    .footer-bottom { flex-direction:column; }
    .brand-logo { width:76px; height:54px; }
}
