:root {
    --bg: #f4f0e9;
    --surface: #ebe6de;
    --surface-2: #dfd9cf;
    --text: #17181f;
    --muted: #6f706f;
    --line: rgba(23, 24, 31, .16);
    --accent: #9B5BAD;
    --accent-soft: #F1D7DB;
    --accent-deep: #7B2D8E;
    --button: #1d2028;
    --button-text: #f8f7f2;
    --shadow: 0 24px 60px rgba(31, 29, 40, .11);
    --serif: "Playfair Display", Georgia, serif;
    --sans: "DM Sans", Arial, sans-serif;
}

html[data-theme="dark"] {
    --bg: #17181b;
    --surface: #232429;
    --surface-2: #2d2e34;
    --text: #f4f0e9;
    --muted: #b8b5ae;
    --line: rgba(244, 240, 233, .15);
    --accent: #B875C7;
    --accent-soft: #3A2C3E;
    --accent-deep: #D9A8E3;
    --button: #f4f0e9;
    --button-text: #17181b;
    --shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); transition: background .3s ease, color .3s ease; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }

.page-shell { min-height: 100%; overflow: hidden; }
.site-header { height: 88px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; max-width: 1440px; margin: 0 auto; padding: 0 56px; border-bottom: 1px solid var(--line); }
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; letter-spacing: -.02em; white-space: nowrap; }
.brand b, .footer-brand b { font-weight: 500; }
.brand-mark { position: relative; width: 26px; height: 22px; display: inline-block; }
.brand-mark i { position: absolute; width: 9px; height: 18px; background: var(--accent); border-radius: 999px; transform: rotate(35deg); top: 2px; }
.brand-mark i:nth-child(1){ left: 1px; }
.brand-mark i:nth-child(2){ left: 8px; height: 21px; top: 0; }
.brand-mark i:nth-child(3){ left: 15px; }
.main-nav { display: flex; align-items: center; gap: 34px; font-size: 14px; }
.main-nav a { position: relative; padding: 10px 0; }
.main-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:2px; height:1px; background:var(--text); transition:right .25s ease; }
.main-nav a:hover::after { right:0; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.lang-switcher { position: relative; }
.lang-trigger, .icon-button { border: 1px solid var(--line); background: transparent; min-height: 42px; border-radius: 999px; cursor: pointer; }
.lang-trigger { padding: 0 14px; display: flex; align-items: center; gap: 8px; }
.icon-button { width: 42px; font-size: 18px; }
#themeIcon { display:inline-flex; align-items:center; justify-content:center; line-height:1; }
#themeIcon .theme-sun-icon { width:18px; height:18px; display:block; }
.lang-menu { position: absolute; z-index: 30; top: 50px; right: 0; min-width: 145px; border: 1px solid var(--line); background: var(--bg); padding: 7px; border-radius: 14px; box-shadow: var(--shadow); }
.lang-menu button { width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.lang-menu button:hover { background: var(--surface); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 44px; padding: 0 20px; border-radius: 7px; border: 1px solid transparent; font-size: 12px; font-weight: 700; letter-spacing: .09em; cursor:pointer; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-dark { background: var(--button); color: var(--button-text); }
.button-large { min-height: 52px; padding: 0 24px; }
.section-pad { max-width: 1440px; margin: 0 auto; padding-left: 56px; padding-right: 56px; }

.hero { min-height: 710px; padding-top: 88px; padding-bottom: 84px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 54px; }
.hero-copy { max-width: 650px; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.eyebrow > span:first-child { width: 8px; height: 8px; border: 2px solid var(--accent); border-radius: 50%; }
h1, h2 { margin: 0; letter-spacing: -.055em; font-weight: 500; line-height: .96; }
h1 { font-size: clamp(64px, 6vw, 94px); margin-top: 20px; }
h1 em, h2 em { font-family: var(--serif); color: var(--accent); font-weight: 600; }
.hero-text { max-width: 530px; color: var(--muted); font-size: 17px; line-height: 1.7; margin: 30px 0; }
.hero-cta { display: flex; align-items: center; gap: 28px; }
.text-link { font-size: 13px; border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.social-row { display: flex; gap: 10px; margin-top: 54px; }
.social-row a { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items:center; font-size: 11px; font-weight: 700; }
.hero-collage { position: relative; min-height: 570px; isolation: isolate; perspective: 1000px; }
.hero-experience-cloud::before { content:""; position:absolute; width:360px; height:360px; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 68%); filter:blur(2px); z-index:-2; }
.hero-orbit { position:absolute; width:390px; height:390px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-12deg); border:1px dashed color-mix(in srgb, var(--accent) 35%, transparent); border-radius:50%; opacity:.55; z-index:-1; }
.hero-dot { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--accent); opacity:.72; box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
.dot-one{left:13%;top:22%}.dot-two{right:10%;top:46%;width:6px;height:6px}.dot-three{left:23%;bottom:12%;width:5px;height:5px}
.experience-card,.experience-phone { position:absolute; border:1px solid var(--line); background:color-mix(in srgb, var(--surface) 96%, transparent); box-shadow:0 18px 50px rgba(18,21,33,.11); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s ease, border-color .25s ease; animation:heroFloat 6s ease-in-out infinite; }
.experience-card:hover,.experience-card:focus-visible,.experience-phone:hover,.experience-phone:focus-visible { z-index:12; outline:none; border-color:color-mix(in srgb, var(--accent) 52%, var(--line)); box-shadow:0 25px 65px rgba(18,21,33,.16); }
.preview-topline { display:flex; justify-content:space-between; align-items:center; font-size:8px; letter-spacing:.14em; font-weight:800; color:var(--muted); }
.preview-topline b { width:24px; height:24px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--accent-deep); font-size:8px; }
.preview-action { display:inline-block; font-size:9px; font-weight:700; letter-spacing:.04em; border-bottom:1px solid currentColor; padding-bottom:3px; }
.invite-preview { width:235px; min-height:185px; left:1%; top:27px; padding:18px 20px; border-radius:18px; transform:rotate(-4deg); animation-delay:-1.1s; }
.invite-preview:hover,.invite-preview:focus-visible { transform:translateY(-9px) rotate(-1deg) scale(1.025); }
.invite-monogram { margin:20px 0 11px; font-family:var(--serif); font-size:30px; line-height:1; color:var(--accent-deep); }
.invite-monogram i { font-size:15px; color:var(--accent); font-style:normal; padding:0 5px; }
.invite-preview p { margin:0; font-size:12px; font-weight:800; letter-spacing:.12em; }
.invite-preview time { display:block; margin:5px 0 17px; font-size:9px; color:var(--muted); letter-spacing:.13em; }
.countdown-preview { width:242px; min-height:148px; right:0; top:47px; padding:18px 19px; border-radius:17px; transform:rotate(3deg); animation-delay:-2.4s; }
.countdown-preview:hover,.countdown-preview:focus-visible { transform:translateY(-9px) rotate(.5deg) scale(1.025); }
.countdown-preview > small { display:block; margin:13px 0 10px; font-size:10px; font-weight:800; letter-spacing:.12em; }
.countdown-row { display:flex; align-items:flex-start; gap:8px; }
.countdown-row div { display:flex; flex-direction:column; align-items:center; }
.countdown-row strong { font-family:var(--serif); font-size:28px; line-height:1; color:var(--accent-deep); }
.countdown-row span { margin-top:4px; font-size:6px; letter-spacing:.12em; color:var(--muted); }
.countdown-row > i { font-style:normal; color:var(--accent); margin-top:5px; }
.mini-progress { display:block; width:100%; height:3px; margin-top:13px; border-radius:99px; background:var(--line); overflow:hidden; }
.mini-progress i { display:block; width:64%; height:100%; background:var(--accent); border-radius:inherit; }
.graduation-preview { width:195px; height:162px; left:3%; bottom:38px; border-radius:18px; padding:19px; display:flex; flex-direction:column; justify-content:space-between; transform:rotate(3.5deg); animation-delay:-3.2s; }
.graduation-preview:hover,.graduation-preview:focus-visible { transform:translateY(-9px) rotate(1deg) scale(1.025); }
.grad-kicker { font-size:8px; letter-spacing:.14em; font-weight:800; color:var(--muted); }
.graduation-preview strong { font-family:var(--serif); font-size:31px; line-height:.88; font-style:italic; color:var(--accent-deep); }
.location-preview { width:225px; min-height:110px; right:1%; bottom:49px; padding:16px; border-radius:17px; display:flex; align-items:center; gap:13px; transform:rotate(-3deg); animation-delay:-.5s; }
.location-preview:hover,.location-preview:focus-visible { transform:translateY(-9px) rotate(-.5deg) scale(1.025); }
.map-mark { flex:0 0 62px; height:72px; border-radius:12px; position:relative; background:repeating-linear-gradient(38deg,color-mix(in srgb,var(--accent) 12%,var(--surface)) 0 14px,var(--surface) 14px 28px); border:1px solid var(--line); }
.map-mark::before,.map-mark::after { content:""; position:absolute; background:color-mix(in srgb,var(--accent) 32%,transparent); height:1px; width:78px; transform:rotate(-42deg); left:-7px; top:32px; }
.map-mark::after { transform:rotate(53deg); top:39px; }
.map-mark span { position:absolute; width:15px; height:15px; border-radius:50% 50% 50% 0; background:var(--accent-deep); left:25px; top:26px; transform:rotate(-45deg); z-index:2; }
.location-preview small { display:block; font-size:7px; letter-spacing:.13em; color:var(--muted); font-weight:800; }
.location-preview strong { display:block; font-family:var(--serif); font-size:24px; margin:4px 0 9px; color:var(--accent-deep); }
.experience-phone { width:184px; height:306px; left:50%; top:51%; transform:translate(-50%,-50%) rotate(.7deg); border-radius:30px; padding:7px; background:#171922; border-color:rgba(255,255,255,.12); z-index:6; animation-delay:-1.8s; }
.experience-phone:hover,.experience-phone:focus-visible { transform:translate(-50%,-53%) rotate(0deg) scale(1.025); }
.phone-speaker { position:absolute; width:48px; height:5px; border-radius:99px; background:#30333e; left:50%; top:13px; transform:translateX(-50%); z-index:2; }
.phone-screen { height:100%; border-radius:24px; padding:31px 16px 18px; background:radial-gradient(circle at 80% 20%,rgba(155,91,173,.30),transparent 32%),linear-gradient(155deg,#211F26,#4D3455 58%,#9B5BAD); color:#f8f5ef; display:flex; flex-direction:column; align-items:center; text-align:center; overflow:hidden; }
.phone-kicker { font-size:6px; letter-spacing:.2em; opacity:.72; }
.phone-mark { width:64px; height:64px; margin:22px 0 18px; position:relative; }
.phone-mark i { position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px; border-radius:50%; background:#E0B4E8; transform:rotate(calc(var(--i) * 45deg)) translateY(-26px); }
.phone-mark i:nth-child(1){--i:0}.phone-mark i:nth-child(2){--i:1}.phone-mark i:nth-child(3){--i:2}.phone-mark i:nth-child(4){--i:3}.phone-mark i:nth-child(5){--i:4}.phone-mark i:nth-child(6){--i:5}.phone-mark i:nth-child(7){--i:6}.phone-mark i:nth-child(8){--i:7}
.phone-screen > small { font-size:7px; letter-spacing:.18em; opacity:.72; }
.phone-screen > strong { font-family:var(--serif); font-size:31px; font-weight:600; line-height:.84; margin:8px 0 auto; }
.phone-screen > strong em { color:#F1D7DB; font-style:italic; }
.phone-button { width:100%; padding:9px 7px; border-radius:999px; background:#f8f5ef; color:#20222c; font-size:6px; font-weight:900; letter-spacing:.12em; }
.cloud-caption { position:absolute; left:50%; bottom:-4px; transform:translateX(-50%); margin:0; font-family:var(--serif); font-style:italic; font-size:15px; color:var(--accent-deep); white-space:nowrap; }
@keyframes heroFloat { 0%,100%{margin-top:0} 50%{margin-top:-7px} }

.trust-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); min-height:92px; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; overflow:hidden; }
.trust-label { height:100%; padding:0 34px 0 56px; display:flex; align-items:center; position:relative; z-index:2; background:var(--bg); font-size:10px; font-weight:800; letter-spacing:.17em; color:var(--muted); white-space:nowrap; }
.trust-label::after { content:''; position:absolute; right:0; top:24%; width:1px; height:52%; background:var(--line); }
.trust-marquee { min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%); }
.trust-track { width:max-content; display:flex; align-items:center; animation:trustMarquee 32s linear infinite; will-change:transform; }
.trust-group { flex:none; display:flex; align-items:center; gap:27px; padding-right:27px; color:var(--muted); }
.trust-group b { font-family:var(--serif); font-size:19px; font-weight:600; font-style:italic; white-space:nowrap; }
.trust-group i { color:var(--accent); font-size:9px; font-style:normal; opacity:.95; }
@keyframes trustMarquee { to { transform:translateX(-50%); } }

.services { padding-top: 112px; padding-bottom: 120px; }
.section-heading { display:grid; grid-template-columns:.55fr 1.1fr .75fr; gap:40px; align-items:end; margin-bottom:52px; }
h2 { font-size: clamp(50px,5vw,76px); }
.section-heading > p:last-child { color:var(--muted); line-height:1.7; max-width:360px; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.service-card { min-height:250px; border:1px solid var(--line); border-radius:16px; padding:26px; display:flex; flex-direction:column; position:relative; background:var(--bg); }
.service-card h3 { font-size:20px; margin:28px 0 12px; }
.service-card p { color:var(--muted); line-height:1.6; margin:0; max-width:92%; font-size:14px; }
.service-icon { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--surface); font-size:18px; }
.service-number { position:absolute; top:26px; right:26px; font-size:11px; color:var(--muted); }
.featured-service { background:var(--accent); color:white; border-color:transparent; }
.featured-service p { color:rgba(255,255,255,.78); }
.featured-service .service-icon { background:rgba(255,255,255,.13); }
.featured-service .service-number { color:rgba(255,255,255,.75); }
.cta-service { background:var(--surface); justify-content:flex-end; }
.cta-service p { font-family:var(--serif); font-size:24px; color:var(--text); }
.cta-service a { margin-top:18px; font-size:13px; font-weight:700; display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:18px; }

.about { padding-bottom:120px; }
.about-card { border-radius:22px; background:var(--surface); padding:64px; display:grid; grid-template-columns:1.15fr .85fr; gap:80px; }
.about-copy { align-self:end; }
.about-copy > p { font-size:17px; line-height:1.75; color:var(--muted); }
.about-pill-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; }
.about-pill-row span { border:1px solid var(--line); border-radius:999px; padding:9px 14px; font-size:11px; text-transform:uppercase; letter-spacing:.09em; }

.contact { padding-top:100px; padding-bottom:120px; border-top:1px solid var(--line); }
.contact-layout { display:grid; grid-template-columns:.72fr 1.28fr; gap:76px; align-items:start; }
.contact-copy { position:sticky; top:35px; }
.contact-copy > p:not(.eyebrow) { color:var(--muted); line-height:1.7; max-width:440px; margin-top:28px; }
.contact-note { display:flex; gap:14px; margin-top:40px; border-top:1px solid var(--line); padding-top:22px; max-width:430px; }
.contact-note > span { color:var(--accent); font-size:22px; }
.contact-note p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.contact-note strong { color:var(--text); }
.project-form { background:var(--surface); border-radius:22px; padding:36px; }
.form-section-title { display:flex; align-items:center; gap:14px; margin:8px 0 24px; padding-top:10px; }
.form-section-title:not(:first-child) { margin-top:36px; padding-top:30px; border-top:1px solid var(--line); }
.form-section-title span { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-deep); font-size:10px; font-weight:700; }
.form-section-title strong { font-family:var(--serif); font-size:24px; }
.form-grid { display:grid; gap:18px; }
.two-col { grid-template-columns:1fr 1fr; }
.project-form label > span:first-child { display:block; margin-bottom:9px; font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--muted); }
.project-form input:not([type="checkbox"]), .project-form select, .project-form textarea { width:100%; border:1px solid var(--line); background:var(--bg); color:var(--text); border-radius:10px; padding:14px 15px; outline:none; transition:border-color .2s ease, box-shadow .2s ease; }
.project-form input:not([type="checkbox"]), .project-form select { height:49px; }
.project-form textarea { resize:vertical; min-height:140px; }
.project-form input:focus, .project-form select:focus, .project-form textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }
.full-field { display:block; }
.form-bottom { margin-top:25px; display:flex; justify-content:space-between; gap:30px; align-items:center; }
.consent { display:flex !important; align-items:flex-start; gap:10px; max-width:500px; }
.consent input { margin-top:3px; accent-color:var(--accent); }
.consent span { margin:0 !important; line-height:1.5; }
.submit-button { white-space:nowrap; border:0; }
.form-message { margin-top:18px; min-height:20px; font-size:13px; font-weight:600; }
.form-message.success { color:#2e7a53; }
.form-message.error { color:#b74c4c; }

.site-footer { border-top:1px solid var(--line); max-width:1440px; margin:0 auto; min-height:180px; padding:45px 56px; display:grid; grid-template-columns:1fr 1fr auto; gap:35px; align-items:start; }
.site-footer p { margin:0; max-width:380px; color:var(--muted); line-height:1.5; }
.footer-links { display:flex; justify-content:flex-end; gap:18px; font-size:12px; }
.site-footer small { grid-column:1/-1; color:var(--muted); font-size:10px; }
.admin-link { opacity:.45; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
    .reveal { opacity:1; transform:none; }
}

/* Desktop-first build. Full phone optimization is intentionally reserved for the responsive pass. */
@media (max-width: 980px) {
    .site-header { grid-template-columns:1fr auto; padding:0 26px; }
    .main-nav { display:none; }
    .header-actions { gap:6px; }
    .header-actions .button { display:none; }
    .trust-label { padding-left:28px; padding-right:24px; }
    .trust-track { animation-duration:28s; }
    .section-pad { padding-left:28px; padding-right:28px; }
    .hero { grid-template-columns:1fr; }
    .hero-collage { min-height:520px; max-width:650px; width:100%; margin:0 auto; }
    .invite-preview{left:2%}.countdown-preview{right:2%}.graduation-preview{left:4%}.location-preview{right:3%}
    .section-heading, .contact-layout, .about-card { grid-template-columns:1fr; }
    .service-grid { grid-template-columns:1fr 1fr; }
    .contact-copy { position:static; }
    .site-footer { padding-left:28px; padding-right:28px; grid-template-columns:1fr 1fr; }
}

/* Package builder */
.span-two { grid-column: 1 / -1; }
.package-builder { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.72fr); gap:22px; align-items:start; }
.package-options { min-width:0; }
.base-package-card { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--bg); }
.base-package-card small, .always-included > small, .package-summary > small { display:block; font-size:10px; letter-spacing:.11em; font-weight:700; color:var(--accent-deep); margin-bottom:9px; }
.base-package-card h3 { margin:0 0 7px; font-family:var(--serif); font-size:25px; }
.base-package-card p { margin:0; max-width:520px; color:var(--muted); font-size:13px; line-height:1.55; }
.base-package-card > strong { font-family:var(--serif); font-size:30px; white-space:nowrap; }
.always-included { margin-top:12px; padding:18px 20px; background:color-mix(in srgb,var(--accent-soft) 45%,var(--bg)); border-radius:14px; border:1px solid var(--line); }
.included-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; }
.included-list span { color:var(--muted); font-size:12px; }
.addon-list { display:grid; gap:10px; margin-top:14px; }
.addon-row { display:grid !important; grid-template-columns:42px minmax(0,1fr) auto 42px; align-items:center; gap:12px; padding:14px 15px; border:1px solid var(--line); border-radius:14px; background:var(--bg); cursor:pointer; transition:border-color .2s ease, transform .2s ease, background .2s ease; }
.addon-row:hover { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); transform:translateY(-1px); }
.addon-icon { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--surface); color:var(--accent-deep); font-weight:700; }
.addon-copy { min-width:0; }
.project-form .addon-copy > strong { display:block; margin-bottom:3px; color:var(--text); font-size:13px; }
.project-form .addon-copy > small { display:block; color:var(--muted); font-size:11px; line-height:1.45; }
.addon-price { color:var(--accent-deep); font-weight:700; font-size:12px; white-space:nowrap; }
.switch { position:relative; width:38px; height:22px; }
.switch input { position:absolute; opacity:0; pointer-events:none; }
.switch i { position:absolute; inset:0; border-radius:999px; background:color-mix(in srgb,var(--muted) 35%,transparent); transition:.2s ease; }
.switch i::after { content:''; position:absolute; width:16px; height:16px; left:3px; top:3px; border-radius:50%; background:var(--surface); box-shadow:0 1px 4px rgba(0,0,0,.18); transition:.2s ease; }
.switch input:checked + i { background:var(--accent); }
.switch input:checked + i::after { transform:translateX(16px); }
.switch input:focus-visible + i { outline:3px solid color-mix(in srgb,var(--accent) 25%,transparent); outline-offset:2px; }
.package-summary { position:sticky; top:100px; padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--bg); }
.package-total { font-family:var(--serif); font-size:48px; line-height:1; margin:16px 0 4px; }
.package-summary > p { margin:0 0 22px; color:var(--muted); font-size:11px; }
.summary-lines { display:grid; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.summary-lines div, .summary-total-row { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; font-size:12px; }
.summary-lines span { color:var(--muted); }
.summary-lines strong { font-weight:600; white-space:nowrap; }
.summary-total-row { padding-top:14px; }
.summary-note { margin-top:18px; padding:12px 13px; border-radius:10px; background:var(--surface); color:var(--muted); font-size:10px; line-height:1.5; }

@media (max-width: 1050px) {
    .package-builder { grid-template-columns:1fr; }
    .package-summary { position:static; }
}

@media (max-width: 720px) {
    .included-list { grid-template-columns:1fr; }
    .addon-row { grid-template-columns:38px minmax(0,1fr) auto; }
    .addon-price { grid-column:2; }
    .switch { grid-column:3; grid-row:1 / span 2; }
}
.service-demo-link {
    display:flex;
    align-items:center;
    width:100%;
    margin-top:auto;
    padding-top:20px;
    padding-bottom:8px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    color:inherit;
    border-bottom:1px solid currentColor;
}
.muted-demo { opacity:.72; }

.services-bottom-cta {
    margin-top:28px;
    padding-top:24px;
    border-top:1px solid var(--line);
    text-align:center;
}

.services-bottom-cta p {
    margin:0;
    font-family:var(--serif);
    font-size:22px;
    line-height:1.5;
}

.services-bottom-cta a {
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-left:6px;
    font-family:var(--sans);
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
    border-bottom:1px solid currentColor;
    padding-bottom:3px;
}

/* Official Agora Digital branding */
.brand-logo { display:block; width:142px; height:42px; object-fit:contain; }
.footer-logo { display:block; width:170px; height:auto; object-fit:contain; }
.logo-dark { display:none; }
html[data-theme="dark"] .logo-light { display:none; }
html[data-theme="dark"] .logo-dark { display:block; }

/* Navbar refinement — Agora section 01 */
.site-header {
    gap: 30px;
    border-bottom-color: color-mix(in srgb, var(--text) 9%, transparent);
}
.brand-logo {
    width: 132px;
    height: 39px;
}
.main-nav {
    gap: 29px;
    font-size: 13px;
}
.main-nav a {
    position: relative;
    padding: 13px 0 16px;
    transition: color .22s ease;
}
.main-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 7px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--accent);
    transform: translateX(-50%) scale(.45);
    opacity: 0;
    transition: width .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease, transform .24s cubic-bezier(.2,.8,.2,1);
}
.main-nav a:hover,
.main-nav a.active {
    color: var(--accent-deep);
}
.main-nav a:hover::after,
.main-nav a.active::after {
    width: 22px;
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
.header-actions > .button.header-cta {
    padding-inline: 21px;
    min-height: 44px;
    transition: transform .2s ease, background .22s ease, color .22s ease, box-shadow .22s ease;
}
.header-actions > .button.header-cta:hover {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 9px 24px color-mix(in srgb, var(--accent) 22%, transparent);
}
.header-actions > .button.header-cta span {
    display: inline-block;
    transition: transform .22s ease;
}
.header-actions > .button.header-cta:hover span {
    transform: translate(3px,-3px);
}
.lang-trigger,
.icon-button {
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.lang-trigger:hover,
.icon-button:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 40%, transparent);
    transform: translateY(-1px);
}

/* =========================================================
   RESPONSIVE PASS — SEPT 2026
   Keeps the large-desktop design intact while adapting
   smaller laptops, tablets and phones.
   ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Smaller desktop / laptop */
@media (min-width: 981px) and (max-width: 1366px) {
    .section-pad {
        padding-left: 40px;
        padding-right: 40px;
    }

    .site-header {
        padding-left: 40px;
        padding-right: 40px;
    }

    .services {
        padding-top: 92px;
        padding-bottom: 100px;
    }
}

/* Tablet */
@media (max-width: 980px) {
    .contact-layout {
        gap: 48px;
    }

    .contact-copy {
        width: 100%;
        max-width: 680px;
    }

    .project-form,
    .package-builder,
    .package-options {
        width: 100%;
        min-width: 0;
    }
}

/* Phone */
@media (max-width: 720px) {
    .site-header {
        height: 72px;
        padding-left: 18px;
        padding-right: 18px;
        gap: 12px;
    }

    .brand-logo {
        width: 108px;
        height: 34px;
    }

    .lang-trigger,
    .icon-button {
        min-height: 38px;
    }

    .icon-button {
        width: 38px;
    }

    .section-pad {
        padding-left: 18px;
        padding-right: 18px;
    }

    .trust-strip {
        min-height: 72px;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .trust-label {
        padding-left: 18px;
        padding-right: 16px;
        font-size: 9px;
    }

    .trust-group {
        gap: 20px;
        padding-right: 20px;
    }

    .trust-group b {
        font-size: 17px;
    }

    .services {
        padding-top: 72px;
        padding-bottom: 84px;
    }

    .section-heading {
        gap: 22px;
        margin-bottom: 30px;
    }

    .section-heading h2 {
        font-size: clamp(42px, 12vw, 58px);
    }

    .section-heading > p:last-child {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.65;
    }

    /* Important: one card per row on phones. */
    .service-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        width: 100%;
    }

    .service-card {
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding: 22px;
    }

    .service-card p {
        max-width: 100%;
    }

    .about {
        padding-bottom: 84px;
    }

    .about-card {
        padding: 30px 22px;
        gap: 30px;
    }

    .about-copy > p {
        font-size: 15px;
    }

    .contact {
        padding-top: 64px;
        padding-bottom: 84px;
    }

    .contact-layout {
        width: 100%;
        min-width: 0;
        gap: 36px;
    }

    .project-form {
        width: 100%;
        min-width: 0;
        padding: 24px 18px;
        border-radius: 18px;
        overflow: hidden;
    }

    /* Form fields stack rather than getting squeezed side by side. */
    .two-col {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-grid,
    .form-grid > *,
    .project-form label,
    .project-form input,
    .project-form select,
    .project-form textarea {
        min-width: 0;
        max-width: 100%;
    }

    .form-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .submit-button {
        width: 100%;
    }

    .site-footer {
        padding: 36px 18px;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-links {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 420px) {
    .site-header {
        padding-left: 14px;
        padding-right: 14px;
    }

    .section-pad {
        padding-left: 14px;
        padding-right: 14px;
    }

    .service-card {
        padding: 20px 18px;
    }

    .project-form {
        padding: 22px 14px;
    }

    .form-section-title {
        gap: 10px;
    }

    .form-section-title strong {
        font-size: 22px;
    }
}

/* =========================================================
   SPLIT-SCREEN / TABLET-WIDTH HEADER FIX
   Keep navigation visible on desktop-like widths.
   ========================================================= */

@media (min-width: 721px) and (max-width: 980px) {
    .site-header {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding-left: 20px;
        padding-right: 20px;
        gap: 18px;
    }

    .brand-logo {
        width: 118px;
        height: 36px;
    }

    .main-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        font-size: 12px;
        min-width: 0;
    }

    .main-nav a {
        white-space: nowrap;
    }

    .header-actions {
        gap: 6px;
    }

    /* Keep the compact controls, hide only the large CTA when space is tight. */
    .header-actions .button {
        display: none;
    }
}

/* Actual phone layout: navigation remains hidden. */
@media (max-width: 720px) {
    .main-nav {
        display: none;
    }
}

/* =========================================================
   FIXED TOOLBAR / SECTION NAVIGATION
   Reliable across Chrome, Windows, Android and split-screen.
   ========================================================= */

.page-shell {
    overflow: visible;
    padding-top: 88px;
}

/* Follow the viewport directly instead of relying on sticky. */
.site-header {
    position: fixed;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: 1440px;
    transform: translateX(-50%);
    z-index: 1000;

    background: color-mix(in srgb, var(--bg) 96%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);

    box-shadow: 0 1px 0 var(--line);
}

/* Make anchor links land with their section visible below header. */
html {
    scroll-padding-top: 100px;
}

#home,
#services,
#about {
    scroll-margin-top: 100px;
}

@media (max-width: 720px) {
    .page-shell {
        padding-top: 72px;
    }

    html {
        scroll-padding-top: 82px;
    }

    #home,
    #services,
    #about {
        scroll-margin-top: 82px;
    }
}