* { margin:0; padding:0; box-sizing:border-box; }
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;
}

/* Platform select */
#platform-select {
    position:fixed; inset:0; z-index:3000; background:#0b111f;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.5rem;
}
.platform-buttons { display:flex; gap:2.5rem; flex-wrap:wrap; justify-content:center; }
.platform-btn {
    background:var(--card-dark); border:1px solid rgba(136,150,168,0.25);
    padding:2.2rem 2rem; border-radius:24px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:1rem;
    transition:all 0.25s; min-width:160px; box-shadow:0 20px 30px -15px black;
    font-family:inherit; color:#fff;
}
.platform-btn:hover { background:#1f2d44; border-color:var(--blueberry-light); transform:scale(1.03); }
.platform-icon { font-size:3.2rem; }
.platform-label { font-size:1.5rem; font-weight:500; }

/* Portal canvas */
#portal { position:fixed; inset:0; z-index:1000; display:none; }
#portal.visible { display:block; }
#portal-canvas { position:absolute; inset:0; width:100%; height:100%; }
.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;
}
.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;
}
.portal-slogan { font-size:1.4rem; font-weight:300; font-style:italic; color:var(--metallic-gray); margin-bottom:3rem; }
.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; transition:all 0.35s; text-align:center;
    box-shadow:0 25px 35px -15px black; color:#eef2f6; text-decoration:none; display:block;
}
.portal-card:hover {
    transform:translateY(-8px); border-color:var(--blueberry-light);
    box-shadow:0 35px 45px -18px #2b3d6f; background:rgba(31,45,68,0.8);
}
.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);
}
.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.25s;
    border:1px solid rgba(255,255,255,0.1);
}
.portal-card:hover .portal-enter { background:var(--blueberry-light); box-shadow:0 10px 20px -5px #2b3d6f; }

@media (max-width:768px) {
    .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; }
}

* { margin:0; padding:0; box-sizing:border-box; }
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; --metallic-gray:#8896a8; --card-dark:#1a2538; --text-soft:#ccd9f0; }
.container { max-width:1300px; margin:0 auto; padding:0 2rem; }
.back-link { position:fixed; top:30px; left:30px; z-index:900; 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:0.25s; }
.back-link:hover { background:var(--blueberry-light); transform:translateY(-3px); }
.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 { 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:0.3s; }
.service-card:hover { border-color:var(--blueberry-light); transform:translateY(-5px); }
.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); }
.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; }
.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:0.25s; cursor:pointer; font-family:inherit; }
.btn:hover { background:var(--blueberry-light); transform:scale(1.02) translateY(-3px); }
.cta-center { text-align:center; margin-top:2rem; }
.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:0.2s; 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); }
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; }
/* Platform overrides */
body.platform-mobile .service-grid { grid-template-columns:1fr!important; }
body.platform-pc .service-grid { grid-template-columns:repeat(auto-fit,minmax(250px,1fr))!important; }

* { margin:0; padding:0; box-sizing:border-box; }
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; --metallic-gray:#8896a8; --card-dark:#1a2538; --text-soft:#ccd9f0; }
.container { max-width:1300px; margin:0 auto; padding:0 2rem; }
.back-link { position:fixed; top:30px; left:30px; z-index:900; 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:0.25s; }
.back-link:hover { background:var(--blueberry-light); transform:translateY(-3px); }
.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 { 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:0.3s; }
.service-card:hover { border-color:var(--blueberry-light); transform:translateY(-5px); }
.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); }
.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; }
.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:0.25s; cursor:pointer; font-family:inherit; }
.btn:hover { background:var(--blueberry-light); transform:scale(1.02) translateY(-3px); }
.cta-center { text-align:center; margin-top:2rem; }
.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:0.2s; 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); }
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; }
body.platform-mobile .service-grid { grid-template-columns:1fr!important; }
body.platform-pc .service-grid { grid-template-columns:repeat(auto-fit,minmax(250px,1fr))!important; }

/* GLOBAL RESET & BASE */
* { margin:0; padding:0; box-sizing:border-box; }
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;
}
.container { max-width:1300px; margin:0 auto; padding:0 2rem; }

/* ========== BACK LINK ========== */
.back-link {
    position:fixed; top:30px; left:30px; z-index:900;
    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.25s;
}
.back-link:hover { background:var(--blueberry-light); transform:translateY(-3px); }

/* ========== 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; }
.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.25s; cursor:pointer; font-family:inherit; font-size:inherit;
}
.btn:hover { background:var(--blueberry-light); transform:scale(1.02) translateY(-3px); }
.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;
}
.hero-image span { font-size:6rem; font-weight:700; opacity:0.7; color:#fff; text-transform:uppercase; letter-spacing:0.1em; }

/* ========== 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; }
.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.3s; position:relative; backdrop-filter:blur(4px);
}
.pricing-card:hover { transform:translateY(-8px); border-color:rgba(82,113,179,0.5); }
.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; }
.pricing-features li::before { content:"–"; position:absolute; left:0; color:var(--blueberry-light); }
.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-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:0.2s;
}
.extra-item:hover { background:rgba(82,113,179,0.1); border-left-color:var(--blueberry-light); }
.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 {
    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 { 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.3s;
    box-shadow:0 20px 30px -15px black; cursor:pointer;
}
.concept-item:hover { transform:translateY(-8px); border-color:var(--blueberry-light); }
.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; }

/* Overlay for concept detail */
.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;
}
.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;
}
.detail-close:hover { background:var(--blueberry-light); }
.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 (shared) */
.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;
}
.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;
}
.contact-modal .email-copy:hover { border-color:var(--blueberry-light); color:#fff; }
.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;
}
.contact-modal .whatsapp-btn:hover { background:#1da851; }
.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;
}

.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.2s; 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); }

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; }

/* Platform specific overrides */
body.platform-mobile .hero-web { grid-template-columns:1fr!important; gap:1.5rem; padding:2.5rem 0; }
body.platform-mobile .hero-image { height:200px!important; border-radius:22px; }
body.platform-mobile .hero-content h1 { font-size:2.2rem; }
body.platform-mobile .pricing-grid, body.platform-mobile .extras-grid, body.platform-mobile .concept-grid { grid-template-columns:1fr!important; }
body.platform-mobile .domain-info { flex-direction:column; text-align:center; }
body.platform-pc .hero-web { grid-template-columns:1fr 1fr!important; }
body.platform-pc .hero-image { height:380px!important; }