* { margin:0; padding:0; box-sizing:border-box; }

html { overflow-y:scroll; }

body {
    font-family:"Inter",system-ui,-apple-system,sans-serif;
    background:#0b111f; color:#eef2f6; line-height:1.5; -webkit-font-smoothing:antialiased;
}

body::before {
    content:""; position:fixed; inset:0;
    background:radial-gradient(circle at 30% 20%, #19273f, #0c1322);
    pointer-events:none; z-index:-1;
}

:root {
    --blueberry:#2b3d6f; --blueberry-light:#5271b3; --blueberry-glow:#6080c0;
    --metallic-gray:#8896a8; --metallic-light:#a5b3c9; --card-dark:#1a2538;
    --text-soft:#ccd9f0;
}

.container { max-width:1300px; margin:0 auto; padding:0 2rem; }

/* ─── Back Link ─── */
.back-link {
    display:inline-flex; align-items:center; gap:0.5rem;
    background:var(--blueberry); color:white; border:1px solid rgba(255,255,255,0.2);
    padding:0.8rem 1.8rem; border-radius:50px; font-weight:500; text-decoration:none;
    font-size:0.95rem; box-shadow:0 15px 25px -10px black; transition:all 0.3s;
}
.back-link.floating { position:fixed; top:30px; left:30px; z-index:900; }
.back-link:hover { background:var(--blueberry-light); transform:translateY(-3px); box-shadow:0 0 30px rgba(82,113,179,0.3); }
.back-link.bottom { top:auto; bottom:30px; left:30px; }

/* ─── Page Header ─── */
.page-header { display:flex; align-items:center; gap:1rem; padding:0.8rem 2rem; background:#0b111f; border-bottom:1px solid rgba(82,113,179,0.15); flex-shrink:0; }
.page-header .back-link { position:static !important; margin:0; padding:0.5rem 1rem; background:transparent; border:none; box-shadow:none; font-size:0.9rem; }
.page-header .back-link:hover { background:rgba(255,255,255,0.06); transform:none; box-shadow:none; }
body.platform-mobile .page-header { padding:0.5rem 1rem; }
body.platform-mobile .page-header img { height:24px !important; }
body.platform-mobile .page-header .back-link { font-size:0.8rem; padding:0.3rem 0.6rem; }

/* ─── Portal ─── */
#portal { position:fixed; inset:0; z-index:1000; display:none; }
#portal.visible { display:block; }

.portal-overlay {
    position:relative; z-index:1; height:100%; display:flex; flex-direction:column;
    align-items:center; justify-content:center; padding:2rem;
    background:rgba(11,17,31,0.55); backdrop-filter:blur(6px); text-align:center;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
}

body.platform-mobile .portal-overlay { justify-content:flex-start; padding-top:3rem; }

.portal-logo-img { height:48px; width:auto; margin-bottom:0.5rem; }
body.platform-mobile .portal-logo-img { height:36px; }

.portal-logo {
    font-size:3.5rem; font-weight:600; letter-spacing:-0.02em;
    background:linear-gradient(140deg,#fff,#b0c4e0);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:0.5rem;
    animation: portalPulse 4s ease-in-out infinite;
}

@keyframes portalPulse {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(82,113,179,0)); }
    50% { filter: drop-shadow(0 0 40px rgba(82,113,179,0.3)); }
}

.portal-slogan {
    font-size:1.4rem; font-weight:300; font-style:italic; color:var(--metallic-gray);
    margin-bottom:3rem; opacity:0; animation: fadeUp 0.8s ease 0.5s forwards;
}

.portal-cards {
    display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; max-width:1100px;
}

.portal-card {
    background:rgba(26,37,56,0.7); backdrop-filter:blur(8px); border-radius:28px;
    padding:2rem 1.8rem; width:240px; border:1px solid rgba(136,150,168,0.25);
    cursor:pointer; text-align:center;
    box-shadow:0 25px 35px -15px black; color:#eef2f6; text-decoration:none; display:block;
    transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
    opacity:0; transform:translateY(30px);
}

.portal-card:nth-child(1) { animation: cardIn 0.6s ease 0.7s forwards; }
.portal-card:nth-child(2) { animation: cardIn 0.6s ease 0.85s forwards; }
.portal-card:nth-child(3) { animation: cardIn 0.6s ease 1.0s forwards; }
.portal-card:nth-child(4) { animation: cardIn 0.6s ease 1.15s forwards; }
.portal-card:nth-child(5) { animation: cardIn 0.6s ease 1.3s forwards; }

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

.portal-card:hover {
    transform:translateY(-8px) scale(1.02);
    border-color:var(--blueberry-light);
    box-shadow:0 35px 45px -18px rgba(82,113,179,0.4);
    background:rgba(31,45,68,0.9);
}

.portal-icon {
    display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px;
    border-radius:50%; background:rgba(82,113,179,0.25); margin-bottom:1rem;
    font-size:1.8rem; font-weight:600; color:#fff; border:1px solid rgba(255,255,255,0.15);
    transition:all 0.4s;
}

.portal-card:hover .portal-icon {
    background:rgba(82,113,179,0.4);
    transform:scale(1.1);
    box-shadow:0 0 30px rgba(82,113,179,0.3);
}

.portal-card-title { font-size:1.5rem; font-weight:500; margin-bottom:0.7rem; color:white; }
.portal-card-desc { font-size:0.9rem; color:var(--metallic-light); margin-bottom:1.5rem; line-height:1.4; }

.portal-enter {
    display:inline-block; background:var(--blueberry); color:white; padding:0.6rem 1.8rem;
    border-radius:40px; font-weight:500; font-size:0.9rem;
    transition:all 0.3s; border:1px solid rgba(255,255,255,0.1);
    position:relative; overflow:hidden;
}

.portal-enter::after {
    content:''; position:absolute; inset:0; border-radius:40px;
    background:linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    opacity:0; transition:opacity 0.3s;
}

.portal-card:hover .portal-enter {
    background:var(--blueberry-light);
    box-shadow:0 10px 30px -5px #2b3d6f;
    transform:translateX(3px);
}

.portal-card:hover .portal-enter::after { opacity:1; }

/* ─── Hero ─── */
.hero-web {
    display:grid; grid-template-columns:1fr 1fr; gap:3rem;
    align-items:center; padding:4rem 0 5rem;
}

.hero-content h1 {
    font-size:3.2rem; font-weight:600; line-height:1.2; letter-spacing:-0.02em;
    background:linear-gradient(140deg,#fff,var(--metallic-light));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:1.5rem;
}

.hero-content p { font-size:1.2rem; color:var(--text-soft); max-width:90%; margin-bottom:2.5rem; }

.hero-image {
    background:radial-gradient(circle at 30% 30%, #2b3d6f, #0e1627); border-radius:32px;
    height:380px; width:100%; display:flex; align-items:center; justify-content:center;
    box-shadow:0 30px 45px -20px black, 0 0 0 1px rgba(82,113,179,0.2) inset;
    position:relative; overflow:hidden;
}

.hero-image::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(82,113,179,0.1), transparent);
    animation: heroShimmer 6s ease-in-out infinite;
}

@keyframes heroShimmer {
    0%, 100% { opacity:0; }
    50% { opacity:1; }
}

.hero-image span {
    font-size:6rem; font-weight:700; opacity:0.7; color:#fff;
    text-transform:uppercase; letter-spacing:0.1em; position:relative; z-index:1;
}

/* ─── Buttons ─── */
.cta-center { display:flex; justify-content:center; margin:2rem 0; }

.btn {
    display:inline-block; background:var(--blueberry); color:white;
    padding:1rem 2.5rem; border-radius:60px; font-weight:500; text-decoration:none;
    border:1px solid rgba(255,255,255,0.05);
    box-shadow:0 18px 30px -12px rgba(0,0,0,0.5);
    transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
    cursor:pointer; font-family:inherit; font-size:inherit;
    position:relative; overflow:hidden;
}

.btn::before {
    content:''; position:absolute; inset:0; border-radius:60px;
    background:linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    opacity:0; transition:opacity 0.3s;
}

.btn:hover { background:var(--blueberry-light); transform:scale(1.04) translateY(-3px); box-shadow:0 0 40px rgba(82,113,179,0.3); }
.btn:hover::before { opacity:1; }
.btn:active { transform:scale(0.97); }

/* ─── Sections ─── */
.section-title {
    font-size:2.6rem; font-weight:500; text-align:center; margin:3rem 0 1rem; color:#fff;
}

.section-subtitle {
    text-align:center; color:var(--metallic-gray); margin-bottom:3.5rem; font-size:1.2rem; font-weight:300;
}

/* ─── Service Grid ─── */
.service-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; margin:3rem 0; }

.service-card {
    background:var(--card-dark); border-radius:28px; padding:2rem;
    border:1px solid rgba(136,150,168,0.15); transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
    position:relative; overflow:hidden;
}

.service-card::after {
    content:''; position:absolute; inset:0; border-radius:28px;
    background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(82,113,179,0.08), transparent 50%);
    opacity:0; transition:opacity 0.4s; pointer-events:none;
}

.service-card:hover { border-color:var(--blueberry-light); transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,0.3); }
.service-card:hover::after { opacity:1; }

.service-card-icon {
    display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px;
    border-radius:50%; background:rgba(82,113,179,0.2); margin-bottom:1rem;
    font-size:1.4rem; font-weight:700; color:#fff;
    border:1px solid rgba(255,255,255,0.15); transition:all 0.3s;
}

.service-card:hover .service-card-icon {
    background:rgba(82,113,179,0.35);
    transform:scale(1.1) rotate(5deg);
}

.service-card h3 { font-size:1.5rem; color:white; margin-bottom:0.7rem; }
.service-card p { color:var(--metallic-gray); font-size:0.95rem; line-height:1.6; }

/* ─── Pricing ─── */
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; margin:3rem 0; }

.pricing-card {
    background:var(--card-dark); border-radius:32px; padding:2.4rem 2rem;
    border:1px solid rgba(136,150,168,0.15); box-shadow:0 30px 40px -25px black;
    transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
    position:relative; backdrop-filter:blur(4px);
}

.pricing-card:hover {
    transform:translateY(-8px);
    border-color:rgba(82,113,179,0.5);
    box-shadow:0 40px 60px -20px rgba(0,0,0,0.5);
}

.pricing-card.special { background:linear-gradient(145deg,#1f2d44,#172233); border-left:4px solid var(--blueberry-light); }

.pricing-card.special::after {
    content:"SPECIAL"; position:absolute; top:20px; right:20px;
    background:var(--blueberry-light); color:white; padding:0.3rem 1.2rem;
    border-radius:30px; font-size:0.7rem; font-weight:600; letter-spacing:0.05em;
    box-shadow:0 5px 15px rgba(0,0,0,0.3);
}

.pricing-name { font-size:1.9rem; font-weight:500; margin-bottom:1.2rem; color:#fff; }
.pricing-price { font-size:2.8rem; font-weight:600; margin-bottom:1.8rem; color:var(--blueberry-light); }
.pricing-price small { font-size:1rem; font-weight:400; color:var(--metallic-gray); }

.pricing-features { list-style:none; margin-bottom:2.2rem; }
.pricing-features li {
    margin-bottom:0.8rem; color:var(--text-soft); padding-left:1.2rem; position:relative;
    transition:all 0.3s;
}
.pricing-features li::before { content:"–"; position:absolute; left:0; color:var(--blueberry-light); }
.pricing-card:hover .pricing-features li { transform:translateX(4px); }
.pricing-card:hover .pricing-features li:nth-child(1) { transition-delay:0s; }
.pricing-card:hover .pricing-features li:nth-child(2) { transition-delay:0.05s; }
.pricing-card:hover .pricing-features li:nth-child(3) { transition-delay:0.1s; }
.pricing-card:hover .pricing-features li:nth-child(4) { transition-delay:0.15s; }

.pricing-footnote { font-size:0.9rem; color:var(--metallic-gray); border-top:1px dashed rgba(136,150,168,0.2); padding-top:1.2rem; }

/* ─── Extras ─── */
.extras-table {
    background:rgba(26,37,56,0.7); backdrop-filter:blur(6px); border-radius:36px;
    padding:2.8rem; margin:3rem 0; border:1px solid rgba(136,150,168,0.15);
    box-shadow:0 25px 35px -20px black;
}

.extras-table h3 { font-size:2rem; font-weight:450; margin-bottom:2rem; color:var(--blueberry-light); }
.extras-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2rem; }

.extra-item {
    background:rgba(0,0,0,0.2); padding:1.5rem; border-radius:24px;
    border-left:4px solid var(--blueberry); transition:all 0.3s;
}

.extra-item:hover {
    background:rgba(82,113,179,0.1);
    border-left-color:var(--blueberry-light);
    transform:translateX(4px);
}

.extra-item .title { font-weight:600; color:white; margin-bottom:0.5rem; font-size:1.2rem; }
.extra-item .desc { color:var(--metallic-gray); font-size:0.95rem; }
.extra-item .price { color:var(--blueberry-light); font-weight:500; margin-top:0.4rem; font-size:0.9rem; }

/* ─── Domain Info ─── */
.domain-info {
    background:rgba(16,24,40,0.8); backdrop-filter:blur(6px); border-radius:32px;
    padding:2.4rem; margin:3rem 0; border:1px solid rgba(136,150,168,0.2);
    display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.8rem;
}
.domain-info .text { color:var(--metallic-light); }
.domain-info .highlight { color:white; font-weight:500; }

/* ─── Concept Grid ─── */
.concept-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; margin:3rem 0; }

.concept-item {
    background:var(--card-dark); border-radius:24px; overflow:hidden;
    border:1px solid rgba(136,150,168,0.2); transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
    box-shadow:0 20px 30px -15px black; cursor:pointer;
}

.concept-item:hover { transform:translateY(-8px); border-color:var(--blueberry-light); box-shadow:0 30px 50px -20px rgba(82,113,179,0.3); }

.concept-image { height:200px; background-size:cover; background-position:center; position:relative; }
.concept-overlay {
    position:absolute; inset:0; background:linear-gradient(to top,rgba(11,17,31,0.9),transparent);
    display:flex; align-items:flex-end; padding:1.5rem;
}
.concept-category { color:var(--blueberry-light); font-size:0.8rem; text-transform:uppercase; letter-spacing:1px; }
.concept-content { padding:1.8rem; }
.concept-title { font-size:1.4rem; font-weight:600; margin-bottom:0.5rem; color:white; }
.concept-desc { color:var(--metallic-gray); font-size:0.95rem; margin-bottom:1rem; }
.concept-link { color:var(--blueberry-light); font-weight:500; display:inline-flex; align-items:center; gap:0.5rem; transition:all 0.3s; }
.concept-item:hover .concept-link { gap:0.8rem; color:#fff; }

/* ─── Overlay ─── */
.overlay {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.8); backdrop-filter:blur(8px); z-index:100;
    display:none; justify-content:center; align-items:center; padding:2rem;
}
.overlay.active { display:flex; }

.detail-card {
    background:var(--card-dark); border-radius:32px; max-width:1000px; width:100%;
    max-height:90vh; overflow-y:auto; border:1px solid rgba(136,150,168,0.3);
    box-shadow:0 40px 60px -20px black; position:relative;
    animation: detailIn 0.4s cubic-bezier(0.16,1,0.3,1);
}

@keyframes detailIn {
    from { opacity:0; transform:translateY(30px) scale(0.95); }
    to { opacity:1; transform:translateY(0) scale(1); }
}

.detail-close {
    position:absolute; top:1.5rem; right:1.5rem; background:rgba(255,255,255,0.1);
    border:none; color:white; width:40px; height:40px; border-radius:50%; font-size:1.5rem;
    cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10;
    transition:all 0.3s;
}
.detail-close:hover { background:var(--blueberry-light); transform:rotate(90deg); }

.detail-image { height:350px; background-size:cover; background-position:center; }
.detail-content { padding:2.5rem; }
.detail-title { font-size:2.2rem; font-weight:600; margin-bottom:1rem; color:white; }
.detail-category { color:var(--blueberry-light); text-transform:uppercase; letter-spacing:1px; margin-bottom:1.5rem; }
.detail-description { color:var(--text-soft); font-size:1.1rem; line-height:1.7; margin-bottom:2rem; }
.detail-features { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }
.detail-features li { color:var(--metallic-light); padding-left:1.5rem; position:relative; }
.detail-features li::before { content:"–"; position:absolute; left:0; color:var(--blueberry-light); }

/* ─── Contact Modal ─── */
.contact-modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(6px);
    z-index:200; display:none; align-items:center; justify-content:center; padding:2rem;
}
.contact-modal-overlay.active { display:flex; }

.contact-modal {
    background:var(--card-dark); border-radius:28px; padding:2.5rem; max-width:480px; width:100%;
    border:1px solid rgba(136,150,168,0.3); text-align:center; position:relative;
    box-shadow:0 40px 60px -20px black;
    animation: modalIn 0.4s cubic-bezier(0.16,1,0.3,1);
}

@keyframes modalIn {
    from { opacity:0; transform:scale(0.9); }
    to { opacity:1; transform:scale(1); }
}

.contact-modal h3 { font-size:1.8rem; font-weight:500; color:#fff; margin-bottom:1.5rem; }

.contact-modal .email-copy {
    background:rgba(0,0,0,0.3); padding:1.2rem; border-radius:16px; margin-bottom:1.5rem;
    word-break:break-all; font-size:1.1rem; color:var(--metallic-light);
    border:1px dashed rgba(136,150,168,0.2); cursor:pointer; transition:all 0.3s;
}
.contact-modal .email-copy:hover { border-color:var(--blueberry-light); color:#fff; background:rgba(82,113,179,0.1); }

.contact-modal .whatsapp-btn {
    display:inline-block; background:#25D366; color:#fff; padding:0.9rem 2.2rem;
    border-radius:40px; font-weight:600; text-decoration:none; margin-top:0.5rem;
    transition:all 0.3s;
}
.contact-modal .whatsapp-btn:hover { background:#1da851; transform:translateY(-2px); box-shadow:0 10px 30px rgba(37,211,102,0.3); }

.contact-modal .close-modal {
    position:absolute; top:1rem; right:1rem; background:rgba(255,255,255,0.1); border:none;
    color:white; width:36px; height:36px; border-radius:50%; font-size:1.3rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:all 0.3s;
}
.contact-modal .close-modal:hover { background:var(--blueberry-light); transform:rotate(180deg); }

/* ─── Contact Section ─── */
.contact-section {
    padding:3.5rem 2rem; margin:4rem 0 2rem; background:rgba(20,30,48,0.6);
    backdrop-filter:blur(8px); border-radius:70px; border:1px solid rgba(136,150,168,0.15);
    text-align:center;
}
.contact-heading { font-size:2.2rem; font-weight:450; color:white; margin-bottom:0.75rem; }
.contact-sub { color:var(--metallic-gray); margin-bottom:2.5rem; font-size:1.1rem; }

.contact-buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; }

.contact-btn {
    background:#1f2d44; border:1px solid rgba(165,179,201,0.3); color:var(--text-light);
    padding:1.1rem 2.8rem; border-radius:60px; font-weight:500; font-size:1.1rem;
    transition:all 0.3s; box-shadow:0 8px 20px -10px black; cursor:pointer;
    text-decoration:none; display:inline-block; font-family:inherit;
}

.contact-btn:hover {
    background:var(--blueberry);
    border-color:var(--blueberry-light);
    transform:translateY(-3px);
    box-shadow:0 10px 30px -10px rgba(82,113,179,0.3);
}

/* ─── Footer ─── */
footer { text-align:center; padding:2.5rem 0 2rem; color:var(--metallic-gray); border-top:1px solid rgba(136,150,168,0.1); font-size:0.95rem; }
footer a { color:var(--metallic-gray); text-decoration:none; transition:color 0.3s; }
footer a:hover { color:var(--blueberry-light); }

/* ─── Fade-up animation ─── */
.fade-up {
    opacity:0; transform:translateY(30px);
    animation:fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
}

.fade-up.delay-1 { animation-delay:0.15s; }
.fade-up.delay-2 { animation-delay:0.3s; }
.fade-up.delay-3 { animation-delay:0.45s; }

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

/* ─── Scroll-triggered reveal (JS will add .visible) ─── */
.reveal {
    opacity:0; transform:translateY(30px);
    transition:all 0.8s cubic-bezier(0.16,1,0.3,1);
}

.reveal.visible { opacity:1; transform:translateY(0); }

/* ─── Mobile Nav ─── */
.nav-toggle {
    background:rgba(255,255,255,0.06); border:1px solid rgba(82,113,179,0.2);
    color:#ccd9f0; font-size:1.4rem; width:40px; height:40px; border-radius:10px;
    cursor:pointer; display:none; align-items:center; justify-content:center;
    margin-left:auto; transition:all 0.25s; flex-shrink:0; line-height:1;
}
.nav-toggle:hover { background:rgba(82,113,179,0.2); border-color:var(--blueberry-light); }
body.platform-mobile .nav-toggle { display:flex; }

.nav-panel {
    position:fixed; top:0; right:0; width:300px; max-width:85vw; height:100dvh;
    background:#0e1627; border-left:1px solid rgba(82,113,179,0.15);
    z-index:5000; display:flex; flex-direction:column; gap:0.5rem;
    padding:5rem 1.5rem 2rem; transform:translateX(100%); transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);
    overflow-y:auto; -webkit-overflow-scrolling:touch; box-shadow:-10px 0 40px rgba(0,0,0,0.5);
}
.nav-panel.open { transform:translateX(0); }

.nav-links { display:flex; flex-direction:column; gap:0.5rem; flex:1; }
.nav-footer { margin-top:auto; border-top:1px solid rgba(136,150,168,0.1); padding-top:1rem; }
.nav-footer .nav-item { font-size:0.85rem; }

.nav-close {
    position:absolute; top:1rem; right:1rem; background:rgba(255,255,255,0.08);
    border:none; color:#ccd9f0; width:36px; height:36px; border-radius:50%;
    font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:all 0.25s;
}
.nav-close:hover { background:var(--blueberry-light); transform:rotate(90deg); }

.nav-title { font-size:1.2rem; font-weight:600; color:#fff; margin-bottom:1rem; letter-spacing:-0.01em; }

.nav-item {
    display:flex; align-items:center; gap:0.8rem; padding:0.8rem 1rem;
    border-radius:14px; color:#b0c0d8; text-decoration:none; font-size:0.95rem;
    transition:all 0.2s; border:1px solid transparent;
}
.nav-item:hover { background:rgba(82,113,179,0.12); color:#fff; border-color:rgba(82,113,179,0.15); }
.nav-item.current { background:rgba(82,113,179,0.2); color:#fff; border-color:rgba(82,113,179,0.25); }

.nav-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:8px; background:rgba(82,113,179,0.15);
    font-weight:600; font-size:0.85rem; color:var(--blueberry-light); flex-shrink:0;
}

/* ─── Platform overrides (force desktop layout on all screen sizes) ─── */
body.platform-mobile .page-header { padding:0.5rem 1rem; }
body.platform-mobile .page-header img { height:24px !important; }
body.platform-mobile .page-header .back-link { font-size:0.8rem; padding:0.3rem 0.6rem; }
body.platform-mobile .portal-overlay { justify-content:flex-start; padding-top:3rem; }
body.platform-mobile .portal-logo-img { height:36px; }
body.platform-mobile .portal-cards { flex-direction:column!important; align-items:center; }
body.platform-mobile .portal-card { width:100%!important; max-width:340px; }
body.platform-mobile .contact-buttons { flex-direction:column; align-items:center; }
body.platform-mobile .contact-btn { width:100%; text-align:center; }

/* ─── Mouse tracking on cards ─── */
.service-card, .pricing-card, .concept-item {
    --mx:50%; --my:50%;
}

/* ─── Selection ─── */
::selection { background:rgba(82,113,179,0.3); color:#fff; }

/* ─── Responsive (portal-only, all service pages forced to desktop layout) ─── */
@media (max-width:900px) {
    .portal-logo { font-size:2.5rem; }
    .portal-cards { gap:1.5rem; }
    .portal-card { width:180px; padding:1.5rem; }
}

@media (max-width:768px) {
    html { font-size:15px; }
    .container { padding:0 1.2rem; }
    .portal-logo { font-size:2.2rem; }
    .portal-slogan { font-size:1rem; margin-bottom:2rem; }
    .portal-cards { flex-direction:column; align-items:center; gap:1.2rem; }
    .portal-card { width:100%; max-width:340px; padding:1.4rem; border-radius:22px; }
    .extras-table { padding:1.5rem; }
    .contact-section { padding:2rem 1rem; border-radius:30px; }
    .contact-buttons { flex-direction:column; }
    .contact-btn { width:100%; text-align:center; }
    .back-link.floating { bottom:15px; right:15px; padding:0.6rem 1.2rem; font-size:0.85rem; }
    body.platform-mobile .back-link.floating { bottom:15px; right:15px; }
}