:root {
    --bg: #0b1220;
    --panel: rgba(255,255,255,.06);
    --border: rgba(255,255,255,.12);
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.65);
    --accent: #7dd3fc;
    --accent2: #a78bfa;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans TC", sans-serif;
    background: var(--bg);
    color: var(--text);
}

.brand-root {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

/* background */
.tech-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
}

    .tech-bg .grid {
        position: absolute;
        inset: -20%;
        background: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
        background-size: 60px 60px;
        transform: perspective(800px) rotateX(55deg);
        opacity: .35;
    }

    .tech-bg .glow {
        position: absolute;
        inset: 0;
        background: radial-gradient(800px 500px at 20% 20%, rgba(125,211,252,.20), transparent 60%), radial-gradient(700px 450px at 80% 30%, rgba(167,139,250,.18), transparent 60%), radial-gradient(900px 600px at 50% 90%, rgba(56,189,248,.10), transparent 60%);
    }

    .tech-bg .noise {
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
        opacity: .08;
        mix-blend-mode: overlay;
    }

/* nav */
.brand-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 14px 0;
    backdrop-filter: blur(10px);
    background: rgba(11,18,32,.55);
    border-bottom: 1px solid var(--border);
}

.nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.logo {
    font-weight: 700;
    letter-spacing: .5px;
    text-decoration: none;
    color: var(--text);
}

.nav-links {
    margin-left: auto;
    display: flex;
    gap: 14px;
}

    .nav-links a {
        color: var(--muted);
        text-decoration: none;
        font-size: 14px;
        padding: 8px 10px;
        border-radius: 999px;
    }

        .nav-links a:hover {
            background: rgba(255,255,255,.06);
            color: var(--text);
        }

.nav-cta {
    text-decoration: none;
    color: #08101b;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 650;
    font-size: 14px;
}

/* snap container */
.snap-container {
    position: relative;
    z-index: 1;
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.snap-section {
    scroll-snap-align: start;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 110px 0 70px; /* leave room for nav, extra breathing room */
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 18px;
}

.hero .badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.05);
    border-radius: 999px;
    color: var(--muted);
    font-size: 13px;
}

h1 {
    margin: 18px 0 10px;
    font-size: 44px;
    line-height: 1.15;
}

.lead {
    color: var(--muted);
    font-size: 18px;
    line-height: 1.7;
    max-width: 820px;
}

.hero-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    background: rgba(255,255,255,.05);
    font-weight: 650;
}

    .btn.primary {
        color: #08101b;
        border: none;
        background: linear-gradient(90deg, var(--accent), var(--accent2));
    }

    .btn.ghost:hover {
        background: rgba(255,255,255,.08);
    }

.hero-metrics {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.metric {
    border: 1px solid var(--border);
    background: rgba(255,255,255,.04);
    border-radius: 18px;
    padding: 14px;
}

    .metric .value {
        font-weight: 750;
    }

    .metric .label {
        margin-top: 6px;
        color: var(--muted);
        font-size: 14px;
    }

h2 {
    font-size: 34px;
    margin: 0 0 10px;
}

.sub {
    color: var(--muted);
    margin-top: 0;
    line-height: 1.7;
}

.split {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
    align-items: start;
}

.card {
    border: 1px solid var(--border);
    background: rgba(255,255,255,.05);
    border-radius: 22px;
    padding: 18px;
}

.checklist {
    margin: 14px 0 0;
    padding-left: 18px;
    color: var(--muted);
}

    .checklist li {
        margin: 10px 0;
    }

.pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.pill {
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.04);
    color: var(--muted);
    font-size: 13px;
}

.grid-3 {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.service-card {
    border: 1px solid var(--border);
    background: rgba(255,255,255,.04);
    border-radius: 20px;
    padding: 16px;
}

    .service-card ul {
        margin: 10px 0 0;
        padding-left: 18px;
        color: var(--muted);
    }

    .service-card li {
        margin: 8px 0;
    }

.grid-2 {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.case-card {
    border: 1px solid var(--border);
    background: rgba(255,255,255,.04);
    border-radius: 18px;
    padding: 16px;
}

.contact-box {
    margin-top: 16px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.04);
    border-radius: 18px;
    padding: 12px;
}

    .contact-box .row {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 6px;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

        .contact-box .row:last-child {
            border-bottom: none;
        }

    .contact-box span {
        color: var(--muted);
    }

.form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

label {
    color: var(--muted);
    font-size: 13px;
}

input, textarea {
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 12px 12px;
    color: var(--text);
    outline: none;
}

    input:focus, textarea:focus {
        border-color: rgba(125,211,252,.45);
    }

.hint {
    color: var(--muted);
    font-size: 13px;
    margin-top: 6px;
}

.footer {
    padding: 20px 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    background: #f1f5f9;
    color: #6b7280;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.muted {
    color: var(--muted);
}

/* responsive */
@media (max-width: 920px) {
    h1 {
        font-size: 36px;
    }

    .split {
        grid-template-columns: 1fr;
    }

    .hero-metrics {
        grid-template-columns: 1fr;
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    .nav-links {
        display: none;
    }

    .nav-inner {
        gap: 8px;
    }

    .hero-actions .btn {
        padding: 8px 12px;
        font-size: 13px;
        border-radius: 10px;
    }

    .hero-actions {
        gap: 8px;
        margin-bottom: 6px; /* 最後一個按鈕與卡片底部保留空間 */
    }

    .hero .badge {
        margin-top: 6px; /* badge 上方保留呼吸空間 */
    }
}

/* Canvas animated background */
.tech-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.tech-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(900px 520px at 18% 18%, rgba(125,211,252,.18), transparent 60%), radial-gradient(700px 480px at 80% 28%, rgba(167,139,250,.16), transparent 60%), linear-gradient(to bottom, rgba(11,18,32,.35), rgba(11,18,32,.65));
}

/* Keep content above bg */
.snap-container, .brand-nav {
    position: relative;
    z-index: 5;
}

.brand-root {
    position: relative;
}

/* Hero card on dark bg */
.hero-dark {
    color: rgba(255,255,255,.92);
}

.hero-card {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    border-radius: 26px;
    padding: 38px;
    box-shadow: 0 18px 40px rgba(0,0,0,.25);
    backdrop-filter: blur(10px);
}

.hero-dark .lead {
    color: rgba(255,255,255,.72);
}

.hero-dark .badge {
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.78);
}

/* White sections like your Next version */
.section-white {
    background: #fff;
    color: #0b1220;
}

/* tabs */
.section-center {
    text-align: center;
}

.tabs {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.tab {
    appearance: none;
    border: 1px solid rgba(0,0,0,.15);
    background: #fff;
    color: #0b1220;
    padding: 12px 18px;
    border-radius: 999px;
    font-weight: 650;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

    .tab:hover {
        border-color: rgba(0,0,0,.30);
        transform: translateY(-1px);
    }

    .tab.is-active {
        background: #0b1220;
        color: #fff;
        border-color: #0b1220;
    }

.tab-panels {
    margin-top: 26px;
}

.tab-panel {
    display: none;
}

    .tab-panel.is-active {
        display: block;
        animation: fadeUp .22s ease both;
    }

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cards-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.card.big {
    border-radius: 26px;
    padding: 26px;
}

.bg-mint {
    background: #EEF7F3;
    border: 1px solid rgba(0,0,0,.06);
}

.bg-indigo {
    background: #EEF2FF;
    border: 1px solid rgba(0,0,0,.06);
}

.card-title {
    font-size: 20px;
    font-weight: 750;
}

.card-desc {
    margin-top: 10px;
    color: rgba(0,0,0,.70);
    line-height: 1.8;
}

.media {
    margin-top: 16px;
    height: 240px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(0,0,0,.06);
}

    .media img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 18px;
    }

.logo-media {
    height: 220px;
}

/* contact form */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

    .form-grid input, .form-grid textarea {
        width: 100%;
        border-radius: 18px;
        border: 1px solid rgba(0,0,0,.15);
        padding: 14px 14px;
        outline: none;
    }

        .form-grid input:focus, .form-grid textarea:focus {
            border-color: rgba(34,211,238,.65);
            box-shadow: 0 0 0 4px rgba(34,211,238,.18);
        }

    .form-grid .span-2 {
        grid-column: 1 / -1;
    }

.form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 920px) {
    .hero-card {
        padding: 26px;
    }

    .cards-2 {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }
}

.contact-wrap {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 14px;
    align-items: start;
}

.contact-card, .contact-form-card {
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.95);
    border-radius: 26px;
    padding: 22px;
    box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.contact-card-title, .contact-form-title {
    font-size: 18px;
    font-weight: 750;
}

.contact-card-desc {
    margin-top: 10px;
    color: rgba(0,0,0,.68);
    line-height: 1.8;
}

.contact-meta {
    margin-top: 16px;
    border-top: 1px solid rgba(0,0,0,.08);
    padding-top: 14px;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
}

.meta-k {
    color: rgba(0,0,0,.55);
}

.meta-v {
    font-weight: 650;
}

.contact-form {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.field label {
    display: block;
    font-size: 13px;
    color: rgba(0,0,0,.60);
    margin: 0 0 6px;
}

.field input, .field textarea {
    width: 100%;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,.15);
    padding: 14px 14px;
    outline: none;
    background: #fff;
    color: #0b1220;
}

    .field input:focus, .field textarea:focus {
        border-color: rgba(34,211,238,.75);
        box-shadow: 0 0 0 4px rgba(34,211,238,.18);
    }

.span-2 {
    grid-column: 1 / -1;
}

.actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert {
    margin-top: 12px;
    border-radius: 16px;
    padding: 12px 14px;
    font-size: 14px;
}

    .alert.success {
        background: rgba(34,197,94,.10);
        border: 1px solid rgba(34,197,94,.25);
        color: rgba(0,0,0,.75);
    }

    .alert.error {
        background: rgba(239,68,68,.10);
        border: 1px solid rgba(239,68,68,.25);
        color: rgba(0,0,0,.75);
    }

/* honeypot hidden */
.hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

@media (max-width: 920px) {
    .contact-wrap {
        grid-template-columns: 1fr;
    }

    .contact-form {
        grid-template-columns: 1fr;
    }

    .actions {
        flex-direction: column;
        align-items: flex-start;
    }
}


<system-reminder>
Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.
</system-reminder>