:root {
    --ink: #172033;
    --ink-soft: #293349;
    --coral: #ff6542;
    --coral-dark: #e84d2d;
    --cream: #fff8f1;
    --paper: #fffdfb;
    --line: #e9e5e1;
}

html { min-height: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; font-family: "DM Sans", system-ui, sans-serif; color: var(--ink); background: var(--paper); }
h1, h2, h3, .navbar-brand { font-family: Manrope, system-ui, sans-serif; letter-spacing: -.035em; }
.site-header { position: relative; z-index: 10; background: var(--ink); }
.navbar-brand { color: #fff; font-size: 1.2rem; letter-spacing: -.03em; }
.navbar-brand:hover { color: #fff; }
.brand-domain { color: var(--coral); }
.brand-mark { display: inline-grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .8rem; color: var(--ink); background: var(--coral); transform: rotate(8deg); }
.brand-mark i { transform: rotate(-8deg); }
.nav-link { color: rgba(255, 255, 255, .72); font-weight: 600; }
.nav-link:hover, .nav-link:focus { color: #fff; }
.expiry-pill { display: inline-block; padding: .45rem .8rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: rgba(255,255,255,.78); font-size: .8rem; white-space: nowrap; }

.hero-section { position: relative; overflow: hidden; color: #fff; background: var(--ink); }
.hero-section::after { position: absolute; right: -8rem; bottom: -12rem; width: 34rem; height: 34rem; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; content: ""; pointer-events: none; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.hero-orb-one { top: 8%; right: 12%; width: 18rem; height: 18rem; background: rgba(255,101,66,.14); }
.hero-orb-two { bottom: -20%; left: -8%; width: 22rem; height: 22rem; background: rgba(255,255,255,.04); }
.eyebrow { display: flex; align-items: center; gap: .65rem; color: #ffd3c8; font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow span { width: 1.5rem; height: 2px; background: var(--coral); }
.eyebrow-dark { color: #7a5360; }
.hero-title { max-width: 48rem; font-size: clamp(3rem, 7vw, 5.9rem); font-weight: 800; line-height: .98; }
.hero-title em { color: var(--coral); font-style: normal; }
.hero-copy { max-width: 43rem; color: #c9cfda; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.7; }
.btn-brand { padding: .9rem 1.3rem; border: 0; border-radius: .9rem; color: var(--ink); background: var(--coral); font-weight: 700; box-shadow: 0 .7rem 2rem rgba(255,101,66,.2); }
.btn-brand:hover, .btn-brand:focus { color: var(--ink); background: #ff8064; transform: translateY(-1px); }
.security-note { color: #aeb6c5; font-size: .9rem; }
.security-note i { color: var(--coral); }
.transfer-preview { position: relative; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.07); box-shadow: 0 2rem 5rem rgba(0,0,0,.2); backdrop-filter: blur(12px); }
.preview-icon { display: grid; width: 4.5rem; height: 4.5rem; place-items: center; border-radius: 1.4rem; color: var(--ink); background: var(--coral); font-size: 1.6rem; transform: rotate(-4deg); }
.preview-rule { height: 1px; background: rgba(255,255,255,.12); }
.transfer-preview .small { color: #adb5c4; }
.transfer-preview .small strong { color: #fff; }
.upload-intro { color: #adb5c4; }
.upload-drop-zone { display: grid; min-height: 9rem; padding: 1.25rem; place-items: center; align-content: center; gap: .35rem; border: 2px dashed rgba(255,255,255,.23); border-radius: 1.1rem; color: #fff; background: rgba(255,255,255,.035); cursor: pointer; text-align: center; transition: border-color .2s ease, background-color .2s ease; }
.upload-drop-zone:hover, .upload-drop-zone:focus-within, .upload-drop-zone.is-dragging { border-color: var(--coral); background: rgba(255,101,66,.1); }
.upload-drop-zone i { color: var(--coral); font-size: 1.65rem; }
.upload-drop-zone span { color: #adb5c4; font-size: .78rem; }
.upload-queue { display: grid; min-width: 0; max-width: 100%; gap: .6rem; }
.upload-item { min-width: 0; max-width: 100%; padding: .75rem; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: .8rem; background: rgba(255,255,255,.05); }
.upload-heading { min-width: 0; max-width: 100%; overflow: hidden; }
.upload-state { max-width: 45%; }
.upload-item .progress, .quota-summary .progress { height: .45rem; background: rgba(255,255,255,.13); }
.upload-item .progress-bar, .quota-summary .progress-bar { background: var(--coral); }
.upload-item.is-complete { border-color: rgba(87, 214, 153, .5); }
.upload-item.is-failed { border-color: rgba(255, 101, 66, .65); }
.quota-summary { padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; }
.transfer-preview .quota-summary { padding: 0; border: 0; color: #adb5c4; background: transparent; }
.transfer-preview .quota-summary strong { color: #fff; }

.options-section { background: var(--cream); }
.section-title { font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 800; line-height: 1.06; }
.mode-card { position: relative; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 1rem 3rem rgba(23,32,51,.06); }
.mode-card-dark { color: #fff; border-color: var(--ink); background: var(--ink); }
.mode-number { position: absolute; top: 1.5rem; right: 2rem; color: #ded9d4; font-family: Manrope, sans-serif; font-size: 3.5rem; font-weight: 800; }
.mode-card-dark .mode-number { color: #313c52; }
.mode-icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: 1.1rem; color: var(--ink); background: var(--coral); font-size: 1.25rem; }
.mode-card h3 { font-weight: 800; }
.mode-card p { max-width: 34rem; color: #697285; line-height: 1.7; }
.mode-card-dark p { color: #bac1cd; }
.quick-share-panel { position: relative; z-index: 1; }
.quick-share-panel .form-control { border-color: rgba(255,255,255,.18); color: #fff; background: rgba(255,255,255,.08); }
.quick-share-panel .form-control::placeholder { color: #8f98a8; }
.quick-share-panel .progress { height: .55rem; background: rgba(255,255,255,.13); }
.quick-share-panel .progress-bar { width: 0; background: var(--coral); transition: width .15s linear; }
.quick-code { color: var(--coral); font-family: Manrope, monospace; font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: .12em; }
.quick-code-input { font-family: Manrope, monospace; font-size: 1.25rem; font-weight: 700; letter-spacing: .14em; text-align: center; }
.quick-divider { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0; color: #8f98a8; font-size: .75rem; text-transform: uppercase; }
.quick-divider::before, .quick-divider::after { height: 1px; flex: 1; background: rgba(255,255,255,.13); content: ""; }
.quick-status { min-height: 2.5rem; color: #bac1cd !important; }
.quick-file-details { padding: .85rem; border: 1px solid rgba(255,255,255,.14); border-radius: .8rem; background: rgba(255,255,255,.05); }
.quick-file-details span { color: #bac1cd; }
.feature-list { display: grid; gap: .75rem; padding-top: .4rem; }
.feature-list li { display: flex; align-items: center; gap: .65rem; font-weight: 600; }
.feature-list i { display: grid; width: 1.45rem; height: 1.45rem; place-items: center; border-radius: 50%; color: var(--coral-dark); background: #ffe4dc; font-size: .7rem; }
.empty-files { border: 1px dashed #d8d2cc; background: #fff; }
.file-card { border: 1px solid var(--line); background: #fff; box-shadow: 0 .5rem 1.5rem rgba(23,32,51,.04); }
.file-card-icon { display: grid; flex: 0 0 auto; width: 3rem; height: 3rem; place-items: center; border-radius: .9rem; color: var(--coral-dark); background: #ffe4dc; font-size: 1.15rem; }
.share-link-panel { border-top: 1px solid var(--line); }
.share-link-group { min-width: 0; }
.share-link-group .form-control { min-width: 0; color: #586174; background: #fff; }
.min-width-0 { min-width: 0; }
.content-section { min-height: calc(100vh - 12rem); background: var(--cream); }
.privacy-copy { color: #586174; font-size: 1.05rem; line-height: 1.75; }
.privacy-copy .lead, .privacy-copy h2, .privacy-copy h3 { color: var(--ink); }
.privacy-diagram { padding: 1.35rem; border: 1px solid var(--line); border-radius: 1.25rem; color: #586174; background: #fff; box-shadow: 0 .75rem 2rem rgba(23,32,51,.05); }
.privacy-diagram-heading { display: flex; align-items: center; gap: .9rem; }
.privacy-diagram-heading p { color: #697285; font-size: .92rem; line-height: 1.45; }
.privacy-diagram-icon { display: grid; width: 3rem; height: 3rem; flex: 0 0 auto; place-items: center; border-radius: .9rem; color: var(--ink); background: var(--coral); }
.privacy-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .65rem; margin-top: 1.25rem; }
.privacy-diagram-dark .privacy-flow { grid-template-columns: minmax(0, 1fr) minmax(7rem, .8fr) minmax(0, 1fr); }
.privacy-flow-step { display: grid; min-width: 0; min-height: 8.5rem; padding: 1rem .65rem; place-items: center; align-content: center; gap: .2rem; border: 1px solid #e4e7eb; border-radius: 1rem; color: var(--ink); background: #fafafa; text-align: center; }
.privacy-flow-step > i { margin-bottom: .25rem; color: var(--coral-dark); font-size: 1.45rem; }
.privacy-flow-step strong { font-size: .92rem; line-height: 1.3; }
.privacy-flow-step span { color: #747c8c; font-size: .76rem; line-height: 1.35; }
.privacy-flow-step-server { border-color: #ffd4ca; background: #fff4f0; }
.privacy-flow-arrow { display: grid; min-width: 4.5rem; place-items: center; gap: .15rem; color: var(--coral-dark); text-align: center; }
.privacy-flow-arrow span { color: #747c8c; font-size: .65rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.privacy-flow-arrow > i { font-size: 1.2rem; }
.privacy-diagram-note { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); color: #586174; font-size: .9rem; line-height: 1.5; }
.privacy-diagram-note > i { margin-top: .22rem; color: var(--coral-dark); }
.privacy-diagram-dark { color: #c8ced8; border-color: var(--ink); background: var(--ink); box-shadow: 0 1rem 2.5rem rgba(23,32,51,.12); }
.privacy-diagram-dark .privacy-diagram-heading h3 { color: #fff; }
.privacy-diagram-dark .privacy-diagram-heading p { color: #bac1cd; }
.privacy-diagram-dark .privacy-flow-step { color: #fff; border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.06); }
.privacy-diagram-dark .privacy-flow-step span, .privacy-diagram-dark .privacy-flow-arrow span { color: #bac1cd; }
.privacy-diagram-dark .privacy-flow-arrow { color: var(--coral); }
.privacy-diagram-dark .privacy-diagram-note { color: #d9dde4; border-color: rgba(255,255,255,.13); }
.privacy-diagram-dark .privacy-diagram-note > i { color: var(--coral); }
.privacy-assist { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; padding: .8rem 1rem; border: 1px dashed rgba(255,255,255,.18); border-radius: .85rem; color: #bac1cd; font-size: .8rem; line-height: 1.45; }
.privacy-assist > i { flex: 0 0 auto; color: var(--coral); font-size: 1.1rem; }
.privacy-assist strong { color: #fff; }
.privacy-technical { padding: 1.4rem; border-left: .3rem solid var(--coral); border-radius: 0 1rem 1rem 0; background: rgba(255,255,255,.7); }
.privacy-technical p:last-child { margin-bottom: 0; }
.site-footer { border-top: 1px solid var(--line); color: #747c8c; background: #fff; font-size: .85rem; }

@media (max-width: 767.98px) {
    .expiry-pill { margin-top: .5rem; }
    .hero-title br { display: none; }
    .transfer-preview { padding: 2rem !important; }
    .privacy-layout { margin-right: 0; margin-left: 0; }
    .privacy-flow, .privacy-diagram-dark .privacy-flow { grid-template-columns: 1fr; }
    .privacy-flow-step { min-height: 7rem; }
    .privacy-flow-arrow { min-height: 3.25rem; }
    .privacy-flow-arrow > i { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: no-preference) {
    .btn-brand { transition: background-color .2s ease, transform .2s ease; }
}