@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&display=swap');
/* Diocreations AI — Premium Template v5 */
:root {
  --primary: #2C3E50;
  --secondary: #06b6d4;
  --gradient: linear-gradient(135deg, #164e63, #0e7490);
  --accent: #cffafe;
  --dark: #0c4a6e;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(0,0,0,.06);
  --bg: #ffffff;
  --bg-alt: #f8fafc;
  --radius: 20px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.04);
  --shadow-md: 0 8px 30px rgba(0,0,0,.06);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.1);
  --glass: rgba(255,255,255,.7);
  --glass-border: rgba(255,255,255,.18);
  --font-body: 'Playfair Display', Georgia, serif;
  --font-heading: 'Clash Display', 'Manrope', sans-serif;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; font-size:16px; }
body { font-family: var(--font-body); color: var(--text); line-height: 1.75; background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x:hidden; }
h1, h2, h3, h4, h5 { font-family: var(--font-heading); line-height:1.12; letter-spacing:-.03em; }
h1 { font-size: clamp(2.8rem, 6vw, 5rem); font-weight:800; }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight:700; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight:650; }
p { font-size: clamp(.95rem, 1.2vw, 1.1rem); }
img { max-width:100%; height:auto; display:block; }
a { transition: color .2s; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }

/* ── Reveal Animations ── */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal:nth-child(2) { transition-delay: .08s; }
.reveal:nth-child(3) { transition-delay: .16s; }
.reveal:nth-child(4) { transition-delay: .24s; }

/* ── Parallax Helper ── */
[data-parallax] { will-change:transform; }

/* ── Glassmorphism Header ── */
.site-header { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); background: var(--glass); border-bottom: 1px solid var(--border); transition: all .4s; }
.site-header.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,.04); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { font-weight: 800; font-size: 1.35rem; color: var(--primary); text-decoration: none; letter-spacing: -.02em; }
.main-nav { display: flex; gap: 32px; }
.main-nav a { color: var(--text); text-decoration: none; font-weight: 500; font-size: .9rem; position: relative; transition: color .2s; }
.main-nav a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--primary); border-radius:1px; transition:width .3s cubic-bezier(.16,1,.3,1); }
.main-nav a:hover { color: var(--primary); }
.main-nav a:hover::after { width:100%; }
.mobile-menu-btn { display:none; background:none; border:none; color:var(--text); font-size:1.5rem; cursor:pointer; padding:8px; }

/* ── Hero — Premium ── */
.hero { position:relative; min-height: 100vh; display:flex; align-items:center; justify-content:center; color:white; overflow:hidden; padding: 140px 24px 120px; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-attachment:fixed; transition:transform .3s; }
.hero-overlay { position:absolute; inset:0; background: linear-gradient(160deg, #0c4a6ef0 0%, #2C3E50a0 60%, #0c4a6ee0 100%); }
.hero-badge { display:inline-block; background:rgba(255,255,255,.12); backdrop-filter:blur(8px); color:white; font-size:.8rem; font-weight:600; padding:10px 22px; border-radius:50px; margin-bottom:24px; border:1px solid rgba(255,255,255,.15); letter-spacing:.04em; text-transform:uppercase; }
.hero-content { position:relative; z-index:2; max-width:800px; text-align:center; animation: heroReveal 1s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes heroReveal { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
.hero h1 { font-size: clamp(2.8rem, 6vw, 5rem); font-weight:800; line-height:1.06; margin-bottom:28px; letter-spacing:-.04em; text-wrap:balance; }
.hero p { font-size: clamp(1.05rem, 1.5vw, 1.3rem); opacity:.88; margin-bottom:48px; max-width:600px; margin-left:auto; margin-right:auto; line-height:1.75; }
.hero--split { justify-content:flex-start; padding-left:clamp(24px,8vw,120px); }
.hero--split .hero-content { max-width:600px; text-align:left; }
.hero--split .hero-content p { margin-left:0; }
.btn { display:inline-flex; align-items:center; gap:10px; padding:17px 42px; border-radius:50px; font-weight:600; font-size:1rem; text-decoration:none; border:none; cursor:pointer; transition: all .3s cubic-bezier(.16,1,.3,1); position:relative; overflow:hidden; letter-spacing:.01em; }
.btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.1); transform:translateX(-100%); transition:transform .4s; }
.btn:hover::after { transform:translateX(0); }
.btn-primary { background:white; color:var(--primary); box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.btn-primary:hover { transform:translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.15); }
.btn-outline { background:transparent; color:white; border:1.5px solid rgba(255,255,255,.35); backdrop-filter:blur(4px); }
.btn-outline:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); }
.btn-dark { background:var(--primary); color:white; }
.btn-dark:hover { transform:translateY(-3px); box-shadow: 0 12px 28px #2C3E5040; }

/* ── Section shared — Premium spacing ── */
.section { padding: clamp(80px, 10vw, 140px) 24px; position:relative; }
.section-alt { background: var(--bg-alt); }
.section-header { text-align:center; max-width:680px; margin:0 auto clamp(48px, 6vw, 80px); }
.section-header h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight:800; letter-spacing:-.03em; margin-bottom:18px; line-height:1.12; text-wrap:balance; }
.section-header p { color: var(--muted); font-size:clamp(1rem, 1.3vw, 1.15rem); line-height:1.75; }
.section-label { display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--primary); background:var(--accent); padding:8px 20px; border-radius:50px; margin-bottom:18px; }

/* ── Page Hero — Premium ── */
.page-hero { background:var(--gradient); color:white; padding:120px 24px 80px; text-align:center; position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 50%, rgba(255,255,255,.08) 0%, transparent 60%); }
.page-hero h1 { font-size:clamp(2.5rem,5vw,3.8rem); font-weight:800; letter-spacing:-.03em; margin-bottom:16px; position:relative; }
.page-hero p { font-size:1.15rem; opacity:.88; max-width:560px; margin:0 auto; position:relative; line-height:1.75; }

/* ── About Section — Asymmetric ── */
.about-section { padding:clamp(80px, 10vw, 140px) 24px; }
.about-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(40px, 6vw, 80px); align-items:center; }
.about-content h2 { margin-bottom:24px; }
.about-content p { color:var(--muted); margin-bottom:18px; line-height:1.8; font-size:1.05rem; }
.about-values { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.about-value { background:var(--accent); color:var(--primary); padding:10px 22px; border-radius:50px; font-size:.88rem; font-weight:600; }
.about-image { border-radius:var(--radius); overflow:hidden; }
.about-image img { width:100%; height:auto; object-fit:cover; border-radius:var(--radius); }

/* ── Stats — Premium counter ── */
.stats-section { padding:clamp(64px, 8vw, 100px) 24px; background:var(--dark); color:white; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:32px; text-align:center; }
.stat-value { font-size:clamp(2.5rem, 4vw, 3.5rem); font-weight:800; letter-spacing:-.03em; line-height:1.1; font-family:var(--font-heading); }
.stat-label { color:rgba(255,255,255,.6); font-size:.9rem; margin-top:8px; font-weight:500; text-transform:uppercase; letter-spacing:.06em; }

/* ── Testimonials — Premium ── */
.testimonials { padding:clamp(80px, 10vw, 140px) 24px; }
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:28px; }
.testimonial-card { background:white; padding:40px 32px; border-radius:var(--radius); border:1px solid var(--border); position:relative; transition:all .3s; }
.testimonial-card::before { content:'\201C'; position:absolute; top:12px; left:28px; font-size:4rem; color:var(--accent); font-family:Georgia,serif; line-height:1; }
.testimonial-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }
.testimonial-text { font-size:1.05rem; line-height:1.8; color:var(--muted); margin-bottom:24px; font-style:italic; padding-top:20px; }
.testimonial-author { display:flex; align-items:center; gap:14px; }
.testimonial-avatar { width:48px; height:48px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:1.1rem; }
.testimonial-name { font-weight:700; font-size:.95rem; }
.testimonial-role { color:var(--muted); font-size:.85rem; }

/* ── Gallery — Premium ── */
.gallery-section { padding:clamp(80px, 10vw, 140px) 24px; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.gallery-item { border-radius:var(--radius); overflow:hidden; position:relative; cursor:pointer; }
.gallery-item img { width:100%; height:280px; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.gallery-item:hover img { transform:scale(1.05); }

/* ── CTA Banner — Premium ── */
.cta-section { padding:clamp(80px, 10vw, 120px) 24px; background:var(--dark); color:white; text-align:center; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 50%, #2C3E5040, transparent 60%); }
.cta-section h2 { font-size:clamp(2rem, 4vw, 3rem); margin-bottom:18px; position:relative; }
.cta-section p { opacity:.8; margin-bottom:40px; max-width:560px; margin-left:auto; margin-right:auto; position:relative; font-size:1.1rem; }

/* ── Features — Premium cards ── */
.features { padding: clamp(80px, 10vw, 140px) 24px; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:28px; }
.feature-card { background:white; padding:44px 32px; border-radius:var(--radius); border:1px solid var(--border); transition:all .4s cubic-bezier(.16,1,.3,1); position:relative; overflow:hidden; }
.feature-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient); transform:scaleX(0); transition:transform .4s; transform-origin:left; }
.feature-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; }
.feature-card:hover::before { transform:scaleX(1); }
.feature-icon { width:60px; height:60px; margin-bottom:24px; border-radius:16px; background:var(--accent); display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:24px; object-fit:cover; }
.feature-card h3 { font-size:1.25rem; font-weight:700; margin-bottom:12px; }
.feature-card p { color:var(--muted); font-size:.98rem; line-height:1.75; }

/* ── Services — Elevated ── */
.services-list { padding:clamp(80px, 10vw, 140px) 24px; }
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px; }
.service-card { background:white; padding:40px 32px; border-radius:var(--radius); border:1px solid var(--border); transition:all .4s cubic-bezier(.16,1,.3,1); position:relative; overflow:hidden; }
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient); transform:scaleX(0); transition:transform .4s cubic-bezier(.16,1,.3,1); transform-origin:left; }
.service-card:hover::before { transform:scaleX(1); }
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.service-card h3 { font-size:1.25rem; font-weight:700; margin-bottom:12px; }
.service-card p { color:var(--muted); margin-bottom:20px; font-size:.98rem; line-height:1.75; }
.service-price { display:inline-block; color:var(--primary); font-weight:700; font-size:1rem; background:var(--accent); padding:8px 20px; border-radius:50px; }

/* ── Blog — Premium ── */
.blog-list { padding:clamp(80px, 10vw, 140px) 24px; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:24px; }
.blog-card { background:white; padding:36px 32px; border-radius:var(--radius); border:1px solid var(--border); transition:transform .3s, box-shadow .3s; cursor:pointer; }
.blog-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.blog-card h3 { font-size:1.2rem; font-weight:650; margin-bottom:10px; }
.blog-card p { color:var(--muted); margin-bottom:12px; font-size:1rem; line-height:1.7; }
.blog-date { color:#94a3b8; font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }

/* ── Contact — Premium split ── */
.contact-content { padding:clamp(80px, 10vw, 140px) 24px; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.contact-info h3 { font-size:1.6rem; font-weight:700; margin-bottom:28px; }
.contact-info-item { display:flex; align-items:flex-start; gap:16px; margin-bottom:24px; }
.contact-info-icon { width:52px; height:52px; border-radius:16px; background:var(--accent); display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:22px; flex-shrink:0; }
.contact-info-text { font-size:1rem; color:var(--muted); }
.contact-info-text strong { display:block; color:var(--text); font-weight:600; margin-bottom:4px; font-size:1.05rem; }
.contact-form { display:flex; flex-direction:column; gap:18px; background:white; padding:44px; border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow-md); }
.contact-form h3 { font-size:1.25rem; font-weight:650; margin-bottom:6px; }
.contact-form input, .contact-form textarea { padding:16px 20px; border:1px solid var(--border); border-radius:14px; font-family:inherit; font-size:1rem; transition:border-color .2s, box-shadow .2s; background:var(--bg-alt); }
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px #2C3E5022; background:white; }

/* ── Footer — Premium dark ── */
.site-footer { background:#0f172a; color:white; padding:72px 24px 32px; }
.footer-content { display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-brand { font-weight:800; font-size:1.4rem; margin-bottom:16px; }
.footer-desc { color:#94a3b8; font-size:.95rem; line-height:1.75; max-width:340px; }
.footer-heading { font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; color:#94a3b8; }
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-links a { color:#cbd5e1; text-decoration:none; font-size:.9rem; transition:color .2s; }
.footer-links a:hover { color:white; }
.footer-social { display:flex; gap:12px; margin-top:12px; }
.footer-social a { width:40px; height:40px; border-radius:10px; background:#1e293b; display:flex; align-items:center; justify-content:center; color:#94a3b8; text-decoration:none; font-size:.85rem; font-weight:600; transition:background .2s, color .2s; }
.footer-social a:hover { background:var(--primary); color:white; }
.footer-bottom { border-top:1px solid #1e293b; padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-bottom p { color:#64748b; font-size:.8rem; }

/* Diocreations Badge */
.diocreations-badge { display:flex; align-items:center; }
.diocreations-badge a { display:flex; align-items:center; gap:8px; color:#64748b; text-decoration:none; font-size:.75rem; transition:color .2s; }
.diocreations-badge a:hover { color:white; }
.butterfly-icon { width:22px; height:22px; animation:float 3s ease-in-out infinite; }
.butterfly-icon .left-wing { animation:flap-left .4s ease-in-out infinite alternate; transform-origin:10px 10px; }
.butterfly-icon .right-wing { animation:flap-right .4s ease-in-out infinite alternate; transform-origin:10px 10px; }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes flap-left { from { transform:rotate(0deg); } to { transform:rotate(-20deg); } }
@keyframes flap-right { from { transform:rotate(0deg); } to { transform:rotate(20deg); } }

/* ═══════════════════════════════════════════════════════
   PREMIUM LAYOUT PRIMITIVES v6 — Webflow/Framer-grade
   ═══════════════════════════════════════════════════════ */

/* — Colored bands (replace plain alt-bg rhythm) — */
.band { padding: clamp(120px, 14vw, 180px) 0; position: relative; overflow: hidden; }
.band--accent { background: var(--accent); }
.band--dark { background: var(--dark); color: white; }
.band--primary { background: var(--primary); color: white; }
.band--cream { background: #FAF6EF; }
.band--ink { background: #0B0B0F; color: #EFEFF1; }
.band--tinted { background: linear-gradient(180deg, var(--bg) 0%, var(--accent) 100%); }
.band--curved-top { border-top-left-radius: 48px; border-top-right-radius: 48px; }
.band--curved-bottom { border-bottom-left-radius: 48px; border-bottom-right-radius: 48px; }

/* — Editorial type — */
.editorial-h { font-family:var(--font-heading); font-size: clamp(3.2rem, 8.5vw, 7.5rem); font-weight:800; line-height:.92; letter-spacing:-.055em; }
.display-numeral { font-family:var(--font-heading); font-size: clamp(6rem, 14vw, 13rem); font-weight:800; line-height:.82; letter-spacing:-.06em; color:var(--primary); opacity:.1; position:absolute; pointer-events:none; user-select:none; }
.display-numeral--solid { opacity:1; color:var(--primary); }
.accent-underline { background-image: linear-gradient(180deg, transparent 62%, #2C3E5030 62%, #2C3E5030 92%, transparent 92%); padding: 0 4px; }
.type-italic { font-style:italic; }
.type-handwriting { font-family:'Caveat', 'Playfair Display', cursive; font-weight:500; }
.small-caps { text-transform:uppercase; letter-spacing:.3em; font-size:.72rem; font-weight:700; }

/* — Blob & organic shapes — */
.blob { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; overflow:hidden; position:relative; }
.blob-alt { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; overflow:hidden; position:relative; }
.blob-soft { border-radius: 58% 42% 48% 52% / 50% 55% 45% 50%; overflow:hidden; position:relative; }
.squircle { border-radius: 32px; overflow:hidden; }
.diamond-rotate { transform: rotate(-3deg); transition: transform .5s; }
.diamond-rotate:hover { transform: rotate(0deg); }
.tilt-l { transform: rotate(-4deg); }
.tilt-r { transform: rotate(3deg); }

/* — Overlaps & layering — */
.overlap-up-80 { margin-top: -80px; position:relative; z-index:3; }
.overlap-up-120 { margin-top: -120px; position:relative; z-index:3; }
.overlap-up-160 { margin-top: -160px; position:relative; z-index:3; }
.overlap-down-80 { margin-bottom: -80px; position:relative; z-index:3; }
.offset-y-up-40 { transform: translateY(-40px); }
.offset-y-down-40 { transform: translateY(40px); }
.offset-y-up-60 { transform: translateY(-60px); }

/* — Floating elements — */
.float-card { position:absolute; background:white; border-radius:20px; padding:20px 26px; box-shadow: 0 20px 60px rgba(0,0,0,.15); border:1px solid rgba(0,0,0,.04); z-index:5; }
.float-card--dark { background: var(--dark); color:white; border-color: rgba(255,255,255,.1); }
.float-pill { display:inline-flex; align-items:center; gap:10px; background:white; color:var(--text); padding:12px 22px; border-radius:50px; box-shadow: 0 15px 40px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.05); font-weight:600; font-size:.85rem; position:absolute; z-index:5; }
.stat-tile { background:white; padding:24px; border-radius:20px; box-shadow: 0 20px 60px rgba(0,0,0,.1); border:1px solid rgba(0,0,0,.04); }
.stat-tile .value { font-size:2rem; font-weight:800; color:var(--primary); line-height:1; font-family:var(--font-heading); letter-spacing:-.03em; }
.stat-tile .label { font-size:.72rem; color:var(--muted); margin-top:6px; text-transform:uppercase; letter-spacing:.12em; font-weight:600; }

/* — Asymmetric grids — */
.grid-broken-3 { display:grid; grid-template-columns: 1.4fr 0.7fr 1.1fr; gap:20px; align-items:start; }
.grid-mosaic-4 { display:grid; grid-template-columns: 1.3fr 0.7fr 1fr; grid-template-rows: 240px 240px; gap:16px; }
.grid-mosaic-4 > :nth-child(1) { grid-row: span 2; }
.grid-mosaic-4 > :nth-child(3) { grid-row: span 2; }
.grid-editorial-2 { display:grid; grid-template-columns: 1.6fr 0.8fr; gap: clamp(28px, 5vw, 64px); align-items:center; }
.grid-editorial-2-r { display:grid; grid-template-columns: 0.8fr 1.6fr; gap: clamp(28px, 5vw, 64px); align-items:center; }
.grid-splits-3 { display:grid; grid-template-columns: 1fr 1.4fr 0.8fr; gap: 24px; }

/* — Clip paths & diagonal sections — */
.diagonal-top { clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%); }
.diagonal-bottom { clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); }
.diagonal-both { clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%); padding-top: clamp(120px, 15vw, 200px); padding-bottom: clamp(120px, 15vw, 200px); }
.corner-cut-tr { clip-path: polygon(0 0, calc(100% - 80px) 0, 100% 80px, 100% 100%, 0 100%); }

/* — Marquee band — */
.marquee-band { overflow:hidden; white-space:nowrap; padding: 28px 0; background:var(--dark); color:white; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.marquee-band .track { display:inline-block; animation: marquee 32s linear infinite; font-size: clamp(1.8rem, 4vw, 3rem); font-weight:700; font-family:var(--font-heading); letter-spacing:-.02em; }
.marquee-band .track span { margin: 0 32px; }
.marquee-band .track .sep { color: var(--primary); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* — Ornaments — */
.circle-ornament { position:absolute; border-radius:50%; pointer-events:none; opacity:.12; }
.circle-ornament--primary { background: var(--primary); }
.circle-ornament--accent { background: var(--accent); opacity:.5; }
.dot-grid { position:absolute; background-image: radial-gradient(currentColor 1.2px, transparent 1.2px); background-size: 20px 20px; color: var(--primary); opacity:.15; pointer-events:none; }

/* — Image frames — */
.frame-shadow { box-shadow: 0 40px 100px -30px rgba(0,0,0,.35); }
.frame-bordered { padding: 12px; background: white; border: 1px solid var(--border); box-shadow: 0 30px 80px -20px rgba(0,0,0,.2); }
.frame-polaroid { padding: 14px 14px 56px; background: white; box-shadow: 0 20px 50px rgba(0,0,0,.15); position:relative; }

/* — Editorial index (magazine-style list) — */
.editorial-row { display:grid; grid-template-columns: 80px 1fr 120px 240px; gap: 32px; align-items:center; padding: 40px 0; border-bottom: 1px solid var(--border); }
.editorial-row:last-child { border-bottom: none; }
.editorial-row .num { font-family: var(--font-heading); font-size: 2.4rem; font-weight:800; color: var(--primary); letter-spacing:-.02em; }
.editorial-row .title { font-family: var(--font-heading); font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight:700; letter-spacing:-.02em; }
.editorial-row .desc { color: var(--muted); font-size: .95rem; line-height:1.7; }

/* — Premium badges — */
.badge-outlined { display:inline-flex; align-items:center; gap:8px; border:1px solid currentColor; padding: 8px 18px; border-radius:50px; font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.rating-badge { display:inline-flex; align-items:center; gap:6px; background: #FFB84D; color:#0B0B0F; padding: 8px 14px; border-radius: 50px; font-weight:700; font-size:.85rem; }

/* — Mobile reset for premium layouts — */
@media (max-width: 968px) {
  .grid-broken-3, .grid-mosaic-4, .grid-editorial-2, .grid-editorial-2-r, .grid-splits-3 { grid-template-columns: 1fr !important; grid-template-rows: auto !important; gap: 20px !important; }
  .grid-mosaic-4 > * { grid-row: auto !important; height: 260px !important; }
  .overlap-up-80, .overlap-up-120, .overlap-up-160 { margin-top: -40px !important; }
  .offset-y-up-40, .offset-y-down-40, .offset-y-up-60 { transform: none !important; }
  .float-card, .float-pill { position: static !important; margin: 12px 0 !important; }
  .editorial-h { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .display-numeral { font-size: 5rem !important; }
  .editorial-row { grid-template-columns: 60px 1fr !important; gap: 16px !important; }
  .editorial-row .desc, .editorial-row > :nth-child(4) { display:none !important; }
  .diagonal-top, .diagonal-bottom, .diagonal-both { clip-path: none !important; }
  .tilt-l, .tilt-r, .diamond-rotate { transform: none !important; }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .main-nav { display:none; position:fixed; top:72px; left:0; right:0; background:white; flex-direction:column; padding:24px; gap:16px; box-shadow:var(--shadow-lg); border-bottom:1px solid var(--border); z-index:98; }
  .main-nav.open { display:flex; }
  .mobile-menu-btn { display:block; }
  .hero { min-height:70vh; padding:80px 20px 60px; }
  .hero h1 { font-size:2rem !important; }
  .hero--split { padding-left:20px !important; justify-content:center !important; }
  .features-grid, .services-grid { grid-template-columns:1fr !important; }
  .contact-grid { grid-template-columns:1fr !important; }
  .about-grid { grid-template-columns:1fr !important; }
  .footer-content { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .section { padding:64px 20px; }
  /* Fix all inline 2-col grids on mobile */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; }
  [style*="grid-template-columns: 80px"] { grid-template-columns:1fr !important; }
  [style*="grid-template-columns:repeat(auto-fit"] { grid-template-columns:1fr !important; }
  [style*="grid-template-columns:repeat(4"] { grid-template-columns:repeat(2,1fr) !important; }
  .page-hero { padding:72px 20px 48px; }
  .page-hero h1 { font-size:1.8rem !important; }
  .hero-bg { background-attachment:scroll !important; }
}
@media (max-width: 480px) {
  .hero h1 { font-size:1.75rem !important; }
  .btn { padding:12px 28px; font-size:.9rem; }
  [style*="grid-template-columns:repeat(2"] { grid-template-columns:1fr !important; }
}

/* ── Restaurant Template ── */
.menu-section { padding:96px 24px; }
.menu-categories { display:flex; flex-direction:column; gap:48px; }
.menu-category-name { font-size:1.5rem; font-weight:700; letter-spacing:-.01em; padding-bottom:12px; border-bottom:2px solid var(--primary); display:inline-block; margin-bottom:24px; }
.menu-items { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.menu-item { padding:20px; background:var(--bg-alt); border-radius:var(--radius); border:1px solid var(--border); transition:border-color .2s; }
.menu-item:hover { border-color:var(--primary); }
.menu-item-header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.menu-item-name { font-weight:600; font-size:1.05rem; color:var(--text); }
.menu-item-price { font-weight:700; color:var(--primary); font-size:1rem; white-space:nowrap; }
.menu-item-desc { color:var(--muted); font-size:.9rem; line-height:1.55; }
.reservation-banner { background:var(--gradient); color:white; padding:64px 24px; text-align:center; }
.reservation-banner h2 { font-size:clamp(1.5rem,3vw,2.2rem); font-weight:700; margin-bottom:12px; }
.reservation-banner p { opacity:.9; margin-bottom:24px; max-width:480px; margin-left:auto; margin-right:auto; }
@media (max-width: 768px) {
  .menu-items { grid-template-columns:1fr; }
}

/* ── Hotel / Resort Template ── */
.rooms-section { padding:96px 24px; }
.rooms-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.room-card { background:white; border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; transition:transform .3s, box-shadow .3s; }
.room-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.room-card-img { height:180px; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:white; font-size:3rem; }
.room-card-body { padding:24px; }
.room-card-body h3 { font-size:1.2rem; font-weight:700; margin-bottom:6px; }
.room-card-body p { color:var(--muted); font-size:.9rem; margin-bottom:14px; line-height:1.55; }
.room-card-price { font-weight:700; color:var(--primary); font-size:1.1rem; margin-bottom:12px; display:block; }
.room-features { display:flex; flex-wrap:wrap; gap:8px; }
.room-feature-tag { background:var(--accent); color:var(--primary); padding:5px 12px; border-radius:50px; font-size:.78rem; font-weight:500; }
.amenities-section { padding:96px 24px; background:var(--bg-alt); }
.amenities-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; max-width:800px; margin:0 auto; }
.amenity-item { background:white; padding:16px; border-radius:12px; text-align:center; font-size:.9rem; font-weight:500; border:1px solid var(--border); transition:border-color .2s, transform .2s; }
.amenity-item:hover { border-color:var(--primary); transform:translateY(-2px); }
.booking-banner { background:var(--gradient); color:white; padding:72px 24px; text-align:center; }
.booking-banner h2 { font-size:clamp(1.5rem,3vw,2.5rem); font-weight:700; margin-bottom:12px; }
.booking-banner p { opacity:.9; margin-bottom:28px; max-width:520px; margin-left:auto; margin-right:auto; }

/* ── Product Grid (Clothing / eCommerce) ── */
.products-section { padding:96px 24px; }
.products-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.product-card { background:white; border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; transition:transform .3s, box-shadow .3s; }
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.product-card-img { height:200px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; font-size:2.5rem; color:var(--muted); }
.product-card-body { padding:18px; }
.product-card-body h3 { font-size:1.05rem; font-weight:600; margin-bottom:4px; }
.product-card-body p { color:var(--muted); font-size:.85rem; margin-bottom:10px; line-height:1.5; }
.product-card-meta { display:flex; justify-content:space-between; align-items:center; }
.product-card-price { font-weight:700; color:var(--primary); font-size:1.1rem; }
.product-card-cat { font-size:.75rem; color:var(--muted); background:var(--bg-alt); padding:3px 10px; border-radius:50px; }

/* ── Treatment Grid (Dental / Medical) ── */
.treatments-section { padding:96px 24px; }
.treatments-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.treatment-card { background:white; padding:28px; border-radius:var(--radius); border:1px solid var(--border); transition:transform .3s, box-shadow .3s; position:relative; overflow:hidden; }
.treatment-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient); }
.treatment-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.treatment-card h3 { font-size:1.1rem; font-weight:650; margin-bottom:6px; }
.treatment-card p { color:var(--muted); font-size:.9rem; margin-bottom:14px; line-height:1.55; }
.treatment-meta { display:flex; gap:16px; flex-wrap:wrap; }
.treatment-price { color:var(--primary); font-weight:700; font-size:.95rem; }
.treatment-duration { color:var(--muted); font-size:.85rem; background:var(--bg-alt); padding:4px 12px; border-radius:50px; }

/* ── Course Grid (Education) ── */
.courses-section { padding:96px 24px; }
.courses-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.course-card { background:white; border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; transition:transform .3s, box-shadow .3s; }
.course-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.course-card-header { padding:20px 20px 14px; border-bottom:1px solid var(--border); }
.course-card-header h3 { font-size:1.1rem; font-weight:650; margin-bottom:4px; }
.course-card-header p { color:var(--muted); font-size:.85rem; line-height:1.5; }
.course-card-footer { padding:14px 20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.course-price { color:var(--primary); font-weight:700; font-size:1.05rem; }
.course-tags { display:flex; gap:6px; flex-wrap:wrap; }
.course-tag { font-size:.72rem; font-weight:500; padding:3px 10px; border-radius:50px; background:var(--accent); color:var(--primary); }