@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

:root {
    --qr-ink: #17130f;
    --qr-coffee: #31241b;
    --qr-copper: #b77a48;
    --qr-copper-2: #d49a62;
    --qr-cream: #fbf4e9;
    --qr-cream-2: #f3e6d5;
    --qr-sage: #74866f;
    --qr-muted: #75695f;
    --qr-line: rgba(49, 36, 27, .13);
    --qr-dark: #120f0c;
    --qr-white: #fffaf2;
    --qr-shadow: 0 24px 70px rgba(49, 36, 27, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    margin: 0;
    overflow-x: hidden;
    color: var(--qr-ink);
    background: var(--qr-cream);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
main { min-height: 100vh; }

.q-page { position: relative; overflow-x: clip; background: var(--qr-cream); }
.q-shell { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.q-shell-wide { width: min(1320px, calc(100% - 40px)); margin-inline: auto; }
.q-section { padding: clamp(68px, 9vw, 118px) 0; }
.q-section.tight { padding: clamp(44px, 6vw, 78px) 0; }
.q-eyebrow { margin: 0 0 12px; color: var(--qr-copper); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; }
.q-title { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2.05rem, 5vw, 4.6rem); line-height: .98; letter-spacing: -.04em; margin: 0; color: var(--qr-ink); }
.q-title.small { font-size: clamp(1.8rem, 3.6vw, 3.1rem); }
.q-lead { color: var(--qr-muted); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.75; margin: 18px 0 0; max-width: 66ch; }
.q-muted { color: var(--qr-muted); }
.q-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid var(--qr-line); border-radius: 999px; background: rgba(255,250,242,.76); color: var(--qr-coffee); font-size: .86rem; font-weight: 700; box-shadow: 0 10px 34px rgba(49,36,27,.08); }
.q-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--qr-sage); box-shadow: 0 0 0 5px rgba(116,134,111,.14); }

.q-nav { position: absolute; inset: 22px 0 auto; z-index: 20; }
.q-nav-inner { width: min(1160px, calc(100% - 28px)); margin: 0 auto; display:flex; align-items:center; justify-content:space-between; gap: 14px; padding: 10px 12px; border: 1px solid rgba(255,250,242,.22); border-radius: 999px; background: rgba(23,19,15,.38); backdrop-filter: blur(18px); box-shadow: 0 18px 55px rgba(0,0,0,.18); }
.q-brand { display:flex; align-items:center; gap: 11px; text-decoration:none; color: var(--qr-white); font-weight: 800; letter-spacing: -.03em; }
.q-brand img { width: 38px; height: 38px; object-fit: contain; border-radius: 11px; }
.q-brand.logo-only { width: 50px; height: 50px; justify-content:center; padding: 5px; border-radius: 18px; background: rgba(255,250,242,.12); border: 1px solid rgba(255,250,242,.18); }
.q-brand.logo-only img { width: 40px; height: 40px; }
.q-nav-links { display:flex; align-items:center; gap: 6px; }
.q-nav-links a { text-decoration:none; color: rgba(255,250,242,.84); font-weight: 700; font-size: .92rem; padding: 10px 13px; border-radius: 999px; }
.q-nav-links a:hover { background: rgba(255,250,242,.12); color: #fff; }

.q-btn-row { display:flex; flex-wrap:wrap; align-items:center; gap: 12px; margin-top: 30px; }
.q-btn { display:inline-flex; align-items:center; justify-content:center; gap: 10px; min-height: 48px; padding: 13px 20px; border-radius: 999px; text-decoration:none; border: 1px solid transparent; font-weight: 800; letter-spacing: -.01em; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.q-btn:hover { transform: translateY(-2px); }
.q-btn.primary { color:#1d130b; background: linear-gradient(135deg, #f4c38d, #d18a4e); box-shadow: 0 18px 36px rgba(177,111,59,.25); }
.q-btn.dark { color: var(--qr-white); background: var(--qr-ink); box-shadow: 0 18px 38px rgba(23,19,15,.22); }
.q-btn.ghost { color: var(--qr-coffee); border-color: var(--qr-line); background: rgba(255,250,242,.72); }
.q-btn.light { color: var(--qr-white); border-color: rgba(255,250,242,.25); background: rgba(255,250,242,.10); }

.q-hero { min-height: 100svh; display:flex; align-items:center; position:relative; isolation:isolate; padding: 124px 0 64px; color: var(--qr-white); background: #17120d; }
.q-hero::before { content:""; position:absolute; inset:0; z-index:-3; background: linear-gradient(90deg, rgba(18,14,10,.90), rgba(18,14,10,.62) 48%, rgba(18,14,10,.92)), url('/images/newstyle/admin/layout/1.png') center/cover no-repeat; filter: blur(4px); }
.q-hero::after { content:""; position:absolute; inset:0; z-index:-2; background: radial-gradient(circle at 20% 12%, rgba(212,154,98,.33), transparent 30%), linear-gradient(180deg, transparent 70%, var(--qr-cream)); }
.q-hero-grid { display:grid; grid-template-columns: minmax(0, 1.02fr) minmax(320px, .88fr); align-items:center; gap: clamp(28px, 6vw, 82px); }
.q-hero .q-title, .q-hero .q-lead { color: var(--qr-white); }
.q-hero .q-lead { color: rgba(255,250,242,.82); }
.q-hero-panel { border: 1px solid rgba(255,250,242,.18); border-radius: 34px; background: rgba(255,250,242,.12); backdrop-filter: blur(18px); padding: 14px; box-shadow: 0 30px 95px rgba(0,0,0,.36); transform: rotate(1.1deg); }
.q-hero-panel img { width:100%; border-radius: 24px; display:block; box-shadow: 0 20px 65px rgba(0,0,0,.36); }
.q-hero-note { margin-top: 14px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.q-hero-note div { padding: 13px 12px; border-radius: 18px; background: rgba(255,250,242,.12); color: rgba(255,250,242,.78); font-size: .82rem; line-height: 1.35; }
.q-hero-note strong { display:block; color: var(--qr-white); font-size: 1.05rem; margin-bottom: 2px; }

.q-proof { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow:hidden; border-radius: 30px; border: 1px solid var(--qr-line); background: var(--qr-line); box-shadow: var(--qr-shadow); }
.q-proof-item { background: rgba(255,250,242,.78); padding: 24px; min-height: 130px; }
.q-proof-item strong { display:block; font-family:"Playfair Display", Georgia, serif; font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing:-.04em; color: var(--qr-coffee); }
.q-proof-item span { display:block; color: var(--qr-muted); margin-top: 7px; line-height: 1.5; }

.q-split { display:grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: clamp(28px, 5vw, 70px); align-items:center; }
.q-panel { border: 1px solid var(--qr-line); border-radius: 34px; background: rgba(255,250,242,.78); box-shadow: var(--qr-shadow); overflow:hidden; }
.q-panel.pad { padding: clamp(22px, 3vw, 36px); }
.q-panel img { display:block; width:100%; }
.q-list { display:grid; gap: 16px; margin-top: 28px; }
.q-list-item { display:grid; grid-template-columns: 42px 1fr; gap: 14px; align-items:start; }
.q-icon { width:42px; height:42px; display:grid; place-items:center; border-radius: 15px; background: #efe1cf; color: var(--qr-copper); font-weight: 900; }
.q-list-item h3 { margin: 0 0 5px; font-size: 1.04rem; font-weight: 850; letter-spacing: -.02em; }
.q-list-item p { margin:0; color: var(--qr-muted); line-height:1.62; }

.q-card-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.q-card { border: 1px solid var(--qr-line); border-radius: 28px; background: rgba(255,250,242,.78); padding: 24px; box-shadow: 0 20px 54px rgba(49,36,27,.09); min-width: 0; }
.q-card h3 { margin: 0 0 10px; font-size: 1.14rem; font-weight: 850; letter-spacing: -.03em; }
.q-card p { margin:0; color: var(--qr-muted); line-height: 1.65; }
.q-card .q-tag { display:inline-flex; margin-bottom: 17px; color: var(--qr-copper); background:#f2dfc8; border-radius:999px; padding:6px 10px; font-size:.78rem; font-weight:850; }

.q-gallery { display:grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: 34px; }
.q-shot { grid-column: span 6; border-radius: 30px; overflow:hidden; border:1px solid var(--qr-line); background:#fff; box-shadow: var(--qr-shadow); }
.q-shot.tall { grid-column: span 4; }
.q-shot img { width:100%; height:100%; display:block; object-fit: cover; }
.q-shot-caption { padding: 18px 20px; background: rgba(255,250,242,.92); }
.q-shot-caption h3 { margin:0 0 5px; font-size:1rem; font-weight:850; }
.q-shot-caption p { margin:0; color:var(--qr-muted); line-height:1.55; font-size:.92rem; }

.q-dark { background: var(--qr-dark); color: var(--qr-white); position:relative; overflow:hidden; }
.q-dark::before { content:""; position:absolute; inset:auto -15% -35% -15%; height:70%; background: radial-gradient(circle, rgba(212,154,98,.22), transparent 62%); pointer-events:none; }
.q-dark .q-title, .q-dark h3 { color: var(--qr-white); }
.q-dark .q-lead, .q-dark p, .q-dark .q-muted { color: rgba(255,250,242,.72); }
.q-dark .q-card { background: rgba(255,250,242,.08); border-color: rgba(255,250,242,.14); box-shadow:none; }
.q-dark .q-tag { color:#ffd3a4; background: rgba(212,154,98,.16); }

.q-cta { border-radius: 40px; padding: clamp(34px, 6vw, 68px); background: linear-gradient(135deg, #2e2118, #17120d); color: var(--qr-white); position:relative; overflow:hidden; box-shadow: 0 30px 90px rgba(49,36,27,.24); }
.q-cta::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 85% 20%, rgba(212,154,98,.34), transparent 34%); pointer-events:none; }
.q-cta > * { position:relative; z-index:1; }
.q-cta .q-title, .q-cta .q-lead { color: var(--qr-white); }
.q-footer { padding: 28px 0 38px; color: var(--qr-muted); font-size:.94rem; }
.q-footer-inner { display:flex; justify-content:space-between; align-items:center; gap: 16px; flex-wrap:wrap; border-top:1px solid var(--qr-line); padding-top: 22px; }
.q-footer a { color: var(--qr-coffee); font-weight: 800; text-decoration:none; }

.interface-hero { padding: 126px 0 72px; background: linear-gradient(135deg, #1b1510, #332214); color: var(--qr-white); position:relative; overflow:hidden; }
.interface-hero::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 80% 20%, rgba(212,154,98,.28), transparent 34%); pointer-events:none; }
.interface-hero .q-shell { position:relative; z-index:1; }
.interface-hero .q-title, .interface-hero .q-lead { color: var(--qr-white); }
.back-link { display:inline-flex; margin-bottom: 24px; color: rgba(255,250,242,.76); text-decoration:none; font-weight:800; }
.back-link:hover { color:#fff; }
.interface-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.interface-card { text-decoration:none; color:inherit; padding: 24px; border-radius: 30px; border:1px solid var(--qr-line); background: rgba(255,250,242,.84); box-shadow: var(--qr-shadow); display:flex; flex-direction:column; min-height: 360px; overflow:hidden; }
.interface-card img { border-radius: 22px; aspect-ratio: 16/10; object-fit: cover; margin-bottom: 20px; }
.interface-card h2 { margin:0 0 10px; font-size:1.35rem; font-weight:900; letter-spacing:-.04em; }
.interface-card p { color: var(--qr-muted); line-height:1.62; margin:0 0 20px; }
.interface-card span { margin-top:auto; color: var(--qr-copper); font-weight:900; }
.interface-card:hover { transform: translateY(-4px); transition: transform .2s ease; }

.screen-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 34px; }
.screen-card { border:1px solid var(--qr-line); border-radius: 28px; background: rgba(255,250,242,.82); overflow:hidden; box-shadow: 0 18px 48px rgba(49,36,27,.1); }
.screen-card img { width:100%; aspect-ratio: 16/9; object-fit: cover; display:block; }
.screen-card-body { padding: 20px; }
.screen-card h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 900; letter-spacing:-.02em; }
.screen-card p { margin:0; color: var(--qr-muted); line-height:1.58; }
.screen-card .badge-soft { display:inline-flex; margin-bottom: 12px; padding: 6px 10px; border-radius:999px; background:#f0dec7; color:#89582e; font-weight:850; font-size:.76rem; }


.q-device-layer { background: linear-gradient(180deg, #fbf4e9 0%, #f2e2cf 100%); position: relative; overflow: hidden; }
.q-device-layer::before { content:""; position:absolute; inset: 8% -18% auto auto; width: 42vw; height: 42vw; border-radius: 50%; background: radial-gradient(circle, rgba(183,122,72,.18), transparent 64%); pointer-events:none; }
.q-device-layer .q-shell { position: relative; z-index: 1; }
.device-split { grid-template-columns: minmax(0,.95fr) minmax(360px,1.05fr); }
.device-showcase { position: relative; min-height: 560px; }
.device-card { margin:0; position:absolute; border-radius: 34px; border:1px solid rgba(49,36,27,.14); background: rgba(255,250,242,.82); box-shadow: 0 28px 78px rgba(49,36,27,.17); overflow:hidden; }
.device-card img, .device-card video { width:100%; display:block; object-fit: cover; }
.device-card figcaption { padding: 14px 18px; font-size:.9rem; font-weight:850; color: var(--qr-coffee); background: rgba(255,250,242,.94); }
.device-card.main { inset: 0 0 auto 54px; width: min(82%, 520px); transform: rotate(.7deg); }
.device-card.main img { aspect-ratio: 4/3; }
.device-card.overlap { right: 0; bottom: 52px; width: min(48%, 270px); transform: rotate(-3deg); }
.device-card.overlap img { aspect-ratio: 3/4; }
.device-card.small-video { left: 0; bottom: 0; width: min(52%, 310px); transform: rotate(2deg); }
.device-card.small-video video { aspect-ratio: 16/10; background:#120f0c; }

.feature-band { display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
.feature-band div { padding: 18px; border-radius: 22px; border:1px solid var(--qr-line); background: rgba(255,250,242,.76); color: var(--qr-muted); line-height:1.5; }
.feature-band strong { display:block; color: var(--qr-ink); margin-bottom: 5px; }

@media (max-width: 1050px) {
    .q-hero-grid, .q-split { grid-template-columns: 1fr; }
    .q-hero { min-height: auto; }
    .q-hero-panel { transform:none; }
    .q-proof, .feature-band { grid-template-columns: repeat(2, 1fr); }
    .interface-grid { grid-template-columns: 1fr; }
    .q-card-grid { grid-template-columns: repeat(2, 1fr); }
    .device-split { grid-template-columns: 1fr; }
    .device-showcase { min-height: 620px; max-width: 680px; margin-inline: auto; width: 100%; }
}
@media (max-width: 760px) {
    .q-shell, .q-shell-wide { width: min(100% - 28px, 1160px); }
    .q-nav { inset: 12px 0 auto; }
    .q-nav-inner { border-radius: 24px; align-items:flex-start; }
    .q-nav-links { display:none; }
    .q-brand img { width:34px; height:34px; }
    .q-brand.logo-only { width:46px; height:46px; border-radius:16px; }
    .q-hero { padding-top: 106px; }
    .q-btn-row, .q-btn { width:100%; }
    .q-hero-note, .q-proof, .q-card-grid, .screen-grid, .feature-band { grid-template-columns: 1fr; }
    .device-showcase { min-height: 0; display:grid; gap: 16px; }
    .device-card, .device-card.main, .device-card.overlap, .device-card.small-video { position:relative; inset:auto; width:100%; transform:none; border-radius: 24px; }
    .q-proof-item { min-height:auto; }
    .q-gallery { grid-template-columns: 1fr; }
    .q-shot, .q-shot.tall { grid-column: auto; }
    .q-panel, .q-shot, .screen-card, .interface-card, .q-cta { border-radius: 24px; }
    .q-card { border-radius: 22px; }
    .interface-hero { padding-top: 102px; }
}

/* QRelia cookie notice */
.qrelia-cookie-banner[hidden],
.qrelia-cookie-settings[hidden] {
    display: none !important;
}

.qrelia-cookie-banner {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 2147482000;
    width: min(920px, calc(100vw - 28px));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 22px;
    color: #f8fbff;
    background: rgba(7, 12, 20, .95);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .48), 0 0 0 1px rgba(255, 255, 255, .03) inset;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.qrelia-cookie-banner__copy {
    min-width: 0;
    display: grid;
    gap: 6px;
    line-height: 1.45;
}

.qrelia-cookie-banner__copy strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 850;
}

.qrelia-cookie-banner__copy span {
    color: rgba(235, 243, 252, .78);
    font-size: .88rem;
}

.qrelia-cookie-banner__copy a {
    width: fit-content;
    color: #75e7ff;
    font-size: .82rem;
    font-weight: 750;
    text-decoration: none;
}

.qrelia-cookie-banner__copy a:hover,
.qrelia-cookie-banner__copy a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.qrelia-cookie-banner__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.qrelia-cookie-btn,
.qrelia-cookie-settings {
    appearance: none;
    border-radius: 999px;
    font: inherit;
    font-size: .82rem;
    font-weight: 850;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.qrelia-cookie-btn {
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid transparent;
}

.qrelia-cookie-btn--primary {
    color: #041014;
    background: linear-gradient(135deg, #42e6c2, #62d9ff);
    box-shadow: 0 10px 28px rgba(67, 224, 218, .2);
}

.qrelia-cookie-btn--secondary {
    color: #ecf5ff;
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .07);
}

.qrelia-cookie-btn:hover,
.qrelia-cookie-btn:focus-visible,
.qrelia-cookie-settings:hover,
.qrelia-cookie-settings:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

.qrelia-cookie-btn:focus-visible,
.qrelia-cookie-settings:focus-visible {
    box-shadow: 0 0 0 3px rgba(98, 217, 255, .28);
}

.qrelia-cookie-settings {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 2147481000;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(241, 247, 255, .8);
    background: rgba(7, 12, 20, .8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 720px) {
    .qrelia-cookie-banner {
        bottom: 10px;
        width: calc(100vw - 20px);
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
        padding: 16px;
        border-radius: 18px;
    }

    .qrelia-cookie-banner__actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }

    .qrelia-cookie-btn {
        width: 100%;
    }
}