/* Premium — Framer-like transitions + 3D carousel + illustrations */
:root{ --premium-ease: cubic-bezier(.16,1,.3,1); --premium-lime:#d5f268; --premium-sage:#8ca650; }
html{ scroll-behavior:auto; }
/* Premium page transitions */
.premium-reveal{ opacity:0; transform:translateY(18px); transition: opacity .7s var(--premium-ease), transform .7s var(--premium-ease); }
.premium-reveal.in{ opacity:1; transform:none; }
.premium-stagger > *{ opacity:0; transform:translateY(14px); transition: opacity .6s var(--premium-ease), transform .6s var(--premium-ease); }
.premium-stagger.in > *:nth-child(1){ transition-delay:.05s; opacity:1; transform:none; }
.premium-stagger.in > *:nth-child(2){ transition-delay:.12s; opacity:1; transform:none; }
.premium-stagger.in > *:nth-child(3){ transition-delay:.19s; opacity:1; transform:none; }
.premium-stagger.in > *:nth-child(4){ transition-delay:.26s; opacity:1; transform:none; }

/* Illustration floating shapes */
.illustration-float{ position:absolute; pointer-events:none; opacity:.9; }
.illustration-float svg{ display:block; }
@keyframes floatY{ 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-8px)} }
.float-anim{ animation: floatY 6s ease-in-out infinite; }

/* 3D carousel — Framer image carousel with top business samples */
.carousel-3d{ position:relative; max-width:1280px; margin:60px auto 80px; padding:0 6%; }
.carousel-viewport{ overflow:hidden; border-radius:16px; background:linear-gradient(135deg,#f7f9f0 0%,#ffffff 100%); border:1px solid #eef1e4; box-shadow:0 20px 60px rgba(32,45,22,.08); }
.carousel-track{ display:flex; transition: transform .7s var(--premium-ease); will-change:transform; }
.carousel-slide{ min-width:100%; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:50px; }
.carousel-slide .slide-copy .eyebrow{ font-size:8px; letter-spacing:1.7px; color:#8c9c77; display:flex; align-items:center; gap:7px; }
.carousel-slide .slide-copy .eyebrow:before{ content:''; width:17px; height:1px; background:#a7b68e; }
.carousel-slide h3{ font:600 34px/1.15 'Manrope',sans-serif; letter-spacing:-1.2px; color:#1e2e15; margin:16px 0 14px; }
.carousel-slide p{ font-size:12px; line-height:1.9; color:#8a9976; max-width:420px; margin:0 0 22px; }
.carousel-slide .figma-badge{ display:inline-flex; align-items:center; gap:8px; font-size:8px; letter-spacing:.6px; color:#6b7a5a; background:#f0f5e0; border:1px solid #dfe9cc; padding:7px 10px; border-radius:20px; margin-bottom:14px; }
.carousel-slide .figma-badge span{ width:8px; height:8px; border-radius:50%; background:var(--premium-lime); border:1px solid #cbe85b; }
.carousel-mock{ position:relative; perspective:1000px; display:grid; place-items:center; }
.carousel-mock img{ width:100%; max-width:520px; border-radius:12px; box-shadow:0 30px 60px rgba(32,45,22,.18), 0 8px 20px rgba(32,45,22,.1); transform: rotateY(-8deg) rotateX(4deg); transition: transform .6s var(--premium-ease); }
@media(hover:hover) and (pointer:fine){ .carousel-slide:hover .carousel-mock img{ transform: rotateY(-4deg) rotateX(2deg) translateY(-4px); } }
.carousel-mock::after{ content:''; position:absolute; inset:auto 10% -12px 10%; height:24px; background:radial-gradient(ellipse at center, rgba(32,45,22,.12) 0%, transparent 70%); filter:blur(6px); }
.carousel-nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px; }
.carousel-dots{ display:flex; gap:8px; }
.carousel-dots button{ width:8px; height:8px; border-radius:50%; border:1px solid #d2d8c7; background:#eef1e4; cursor:pointer; transition: all .3s; }
.carousel-dots button.active{ width:22px; border-radius:20px; background:var(--premium-lime); border-color:#cbe85b; }
.carousel-arrows{ display:flex; gap:10px; }
.carousel-arrows button{ width:38px; height:38px; border-radius:8px; border:1px solid #e2e7d6; background:#fff; display:grid; place-items:center; cursor:pointer; transition: all .2s; font-size:16px; }
.carousel-arrows button:hover{ background:#f7f9f0; transform:translateY(-1px); box-shadow:0 6px 16px rgba(32,45,22,.08); }
.carousel-3d-hero{ position:relative; margin:40px 0 20px; border-radius:16px; overflow:hidden; border:1px solid #eef1e4; box-shadow:0 20px 60px rgba(32,45,22,.08); }
.carousel-3d-hero img{ width:100%; height:420px; object-fit:cover; display:block; }
.carousel-3d-hero .hero-overlay{ position:absolute; inset:0; background:linear-gradient(to right, rgba(32,45,22,.35) 0%, transparent 55%); display:flex; align-items:center; padding:40px; }
.carousel-3d-hero .overlay-copy{ background:rgba(255,255,255,.92); backdrop-filter:blur(8px); padding:28px; border-radius:12px; max-width:360px; box-shadow:0 12px 32px rgba(32,45,22,.12); }
.carousel-3d-hero .overlay-copy h4{ font:600 18px 'Manrope',sans-serif; margin:0 0 10px; color:#1e2e15; }
.carousel-3d-hero .overlay-copy p{ font-size:11px; line-height:1.7; color:#6b7a5a; margin:0; }

/* Figma template list — premium grid */
.figma-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:30px 0 50px; }
.figma-card{ background:#fff; border:1px solid #eef1e4; border-radius:14px; overflow:hidden; transition: transform .3s var(--premium-ease), box-shadow .3s; }
@media(hover:hover) and (pointer:fine){ .figma-card:hover{ transform:translateY(-6px) scale(1.01); box-shadow:0 18px 40px rgba(32,45,22,.12); } }
.figma-card .figma-img{ aspect-ratio:1.45; overflow:hidden; background:#f7f9f0; position:relative; }
.figma-card .figma-img img{ width:100%; height:100%; object-fit:cover; object-position:top; transition: transform .7s var(--premium-ease); }
@media(hover:hover) and (pointer:fine){ .figma-card:hover .figma-img img{ transform:scale(1.04); } }
.figma-card .figma-meta{ padding:20px; }
.figma-card .figma-meta .kicker{ font-size:7px; letter-spacing:1px; color:#8c9c77; display:flex; justify-content:space-between; align-items:center; }
.figma-card .figma-meta .kicker span{ background:#f0f5e0; border:1px solid #dfe9cc; padding:4px 6px; border-radius:4px; font-size:6px; }
.figma-card h4{ font:600 18px 'Manrope',sans-serif; margin:12px 0 8px; color:#2a341a; letter-spacing:-.5px; }
.figma-card p{ font-size:11px; line-height:1.7; color:#8a9976; margin:0 0 14px; }
.figma-card .card-foot{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid #eef1e4; padding-top:14px; font-size:9px; color:#7e9a5c; }

/* Premium illustration for hero */
.hero-illustration{ position:absolute; right:-10px; top:-10px; width:120px; height:120px; opacity:.08; pointer-events:none; }

/* Trustpilot — world-class social proof */
.trustpilot-section{ background:#fcfdf8; border:1px solid #eef1e4; border-radius:16px; padding:42px; margin:70px 0 60px; box-shadow:0 8px 32px rgba(32,45,22,.06); }
.trustpilot-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px; margin-bottom:32px; }
.trustpilot-badge{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #e2e7d6; border-radius:12px; padding:14px 18px; box-shadow:0 4px 16px rgba(32,45,22,.06); }
.trustpilot-badge .tp-logo{ font:800 18px 'Manrope',sans-serif; letter-spacing:-.5px; color:#00b67a; display:flex; align-items:center; gap:8px; }
.trustpilot-badge .tp-logo span{ color:#191919; }
.trustpilot-badge .tp-stars{ display:flex; gap:3px; }
.trustpilot-badge .tp-stars span{ width:22px; height:22px; background:#00b67a; color:#fff; display:grid; place-items:center; font-size:12px; border-radius:3px; }
.trustpilot-meta{ font-size:10px; color:#6b7a5a; line-height:1.6; }
.trustpilot-meta strong{ color:#1e2e15; font-size:13px; }
.trustpilot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.trust-card{ background:#fff; border:1px solid #eef1e4; border-radius:12px; padding:24px; transition: transform .3s var(--premium-ease), box-shadow .3s; }
@media(hover:hover) and (pointer:fine){ .trust-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(32,45,22,.08); } }
.trust-card .stars{ color:#00b67a; font-size:13px; letter-spacing:1px; margin-bottom:12px; }
.trust-card p{ font-size:11px; line-height:1.8; color:#5a6b4d; margin:0 0 16px; min-height:72px; }
.trust-card .author{ display:flex; align-items:center; gap:12px; border-top:1px solid #eef1e4; padding-top:14px; }
.trust-card .avatar{ width:36px; height:36px; border-radius:50%; background:#f0f5e0; border:1px solid #dfe9cc; display:grid; place-items:center; font:600 12px 'Manrope',sans-serif; color:#6b7a5a; }
.trust-card .author strong{ font-size:11px; color:#1e2e15; display:block; }
.trust-card .author small{ font-size:9px; color:#8a9976; }
.trustpilot-foot{ text-align:center; margin-top:22px; font-size:9px; color:#a8b39b; }

/* World-class footer */
.world-footer{ background:#0f1510; color:#e6e9dd; margin-top:80px; border-top:1px solid #1e2a1c; }
.world-footer-inner{ max-width:1280px; margin:auto; padding:50px 6% 30px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid #1e2a1c; }
.footer-brand .footer-logo{ width:160px; filter:brightness(1.2); margin-bottom:16px; display:block; }
.footer-brand p{ font-size:11px; line-height:1.8; color:#9aa38e; max-width:320px; margin:0 0 18px; }
.footer-brand .world-badge{ display:inline-flex; align-items:center; gap:8px; background:#1a2315; border:1px solid #2a3a22; color:#d5f268; padding:8px 12px; border-radius:20px; font-size:8px; letter-spacing:.6px; }
.footer-brand .world-badge span{ width:8px; height:8px; border-radius:50%; background:#d5f268; }
.footer-col h4{ font:600 11px 'Manrope',sans-serif; letter-spacing:1px; color:#e6e9dd; margin:0 0 18px; text-transform:uppercase; }
.footer-col a{ display:block; font-size:11px; line-height:2.2; color:#9aa38e; transition:color .2s; }
.footer-col a:hover{ color:#d5f268; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0 0; font-size:9px; color:#6b7a5a; flex-wrap:wrap; }
.footer-bottom .legal{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-bottom .legal a{ color:#8a9a7a; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:32px; height:32px; border-radius:8px; background:#1a2315; border:1px solid #2a3a22; display:grid; place-items:center; color:#9aa38e; font-size:12px; transition: all .2s; }
.footer-social a:hover{ background:#d5f268; color:#0f1510; border-color:#cbe85b; }

@media(max-width:900px){
  .carousel-slide{ grid-template-columns:1fr; padding:30px; gap:26px; }
  .carousel-mock img{ max-width:100%; transform:none !important; }
  .figma-grid{ grid-template-columns:1fr 1fr; }
  .trustpilot-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:30px; }
}
@media(max-width:640px){
  .figma-grid{ grid-template-columns:1fr; }
  .carousel-3d-hero img{ height:280px; }
  .carousel-3d-hero .hero-overlay{ padding:20px; }
  .trustpilot-section{ padding:28px 20px; }
  .trustpilot-head{ flex-direction:column; }
  .footer-top{ grid-template-columns:1fr; }
  .world-footer-inner{ padding:40px 6% 24px; }
}

/* Reachmark Banner Carousel — 3 professional ad banners, live switching */
.banner-carousel{ position:relative; max-width:1280px; margin:18px auto 0; padding:0 6%; }
.banner-viewport{ overflow:hidden; border-radius:18px; border:1px solid #eef1e4; background:#ffffff; box-shadow:0 18px 48px rgba(32,45,22,.09); }
.banner-track{ display:flex; transition: transform .75s cubic-bezier(.16,1,.3,1); will-change:transform; }
.banner-slide{ min-width:100%; display:grid; grid-template-columns:1.15fr .95fr; gap:30px; align-items:center; padding:38px 44px; position:relative; overflow:hidden; }
.banner-slide::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 70% 50%, rgba(213,242,104,.18) 0%, transparent 55%), linear-gradient(135deg, #f7f9f0 0%, #ffffff 55%); pointer-events:none; }
.banner-copy{ position:relative; z-index:1; }
.banner-kicker{ font-size:8px; letter-spacing:1.6px; color:#8c9c77; display:flex; align-items:center; gap:8px; font-weight:600; }
.banner-kicker span{ width:22px; height:1px; background:#a7b68e; }
.banner-slide h2{ font:800 clamp(28px,3.4vw,38px)/1.08 'Manrope',sans-serif; letter-spacing:-1.4px; color:#1e2e15; margin:16px 0 14px; }
.banner-slide h2 em{ font-style:normal; color:#8ca650; }
.banner-slide .banner-sub{ font-size:12px; line-height:1.8; color:#6b7a5a; max-width:480px; margin:0 0 20px; }
.banner-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
.banner-ctas a{ display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:8px; font:600 11px 'Manrope',sans-serif; transition: all .2s; text-decoration:none; }
.banner-ctas .primary{ background:#1a2315; color:#eaf3de; border:1px solid #263321; }
.banner-ctas .primary:hover{ background:#263321; transform:translateY(-1px); box-shadow:0 8px 20px rgba(32,45,22,.15); }
.banner-ctas .ghost{ background:#d5f268; color:#1e2e15; border:1px solid #cbe85b; }
.banner-ctas .ghost:hover{ background:#c7e55b; transform:translateY(-1px); }
.banner-proof{ display:flex; align-items:center; gap:10px; margin-top:18px; font-size:9px; color:#8a9976; flex-wrap:wrap; }
.banner-proof span{ display:inline-flex; align-items:center; gap:6px; background:#f0f5e0; border:1px solid #dfe9cc; padding:6px 10px; border-radius:20px; }
.banner-visual{ position:relative; z-index:1; display:grid; place-items:center; perspective:1000px; }
.banner-visual img{ width:100%; max-width:560px; height:360px; object-fit:cover; border-radius:14px; box-shadow:0 28px 60px rgba(32,45,22,.16), 0 8px 20px rgba(32,45,22,.1); transform: rotateY(-6deg) rotateX(3deg); transition: transform .6s var(--premium-ease); border:1px solid #eef1e4; }
@media(hover:hover) and (pointer:fine){ .banner-slide:hover .banner-visual img{ transform: rotateY(-3deg) rotateX(1deg) translateY(-4px); } }
.banner-visual::after{ content:''; position:absolute; inset:auto 8% -14px 8%; height:22px; background:radial-gradient(ellipse at center, rgba(32,45,22,.13) 0%, transparent 70%); filter:blur(6px); }
.banner-nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; padding:0 4px; }
.banner-dots{ display:flex; gap:8px; }
.banner-dots button{ width:8px; height:8px; border-radius:50%; border:1px solid #d2d8c7; background:#eef1e4; cursor:pointer; transition: all .3s; }
.banner-dots button.active{ width:26px; border-radius:20px; background:#d5f268; border-color:#cbe85b; }
.banner-arrows{ display:flex; gap:10px; }
.banner-arrows button{ width:40px; height:40px; border-radius:10px; border:1px solid #e2e7d6; background:#fff; display:grid; place-items:center; cursor:pointer; font-size:18px; transition: all .2s; }
.banner-arrows button:hover{ background:#f7f9f0; transform:translateY(-1px); box-shadow:0 6px 16px rgba(32,45,22,.08); }
.banner-badge{ position:absolute; top:18px; right:18px; z-index:2; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border:1px solid #e2e7d6; padding:7px 10px; border-radius:20px; font-size:7px; letter-spacing:.5px; color:#6b7a5a; display:flex; align-items:center; gap:6px; }
.banner-badge span{ width:7px; height:7px; border-radius:50%; background:#d5f268; border:1px solid #cbe85b; }

/* Review column — leave a review for good job done */
.review-section{ background:#fcfdf8; border:1px solid #eef1e4; border-radius:16px; padding:42px; margin:70px 0 60px; box-shadow:0 8px 32px rgba(32,45,22,.06); }
.review-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px; margin-bottom:32px; flex-wrap:wrap; }
.review-head h2{ font:600 30px/1.15 'Manrope',sans-serif; letter-spacing:-1.2px; color:#1e2e15; margin:12px 0 8px; }
.review-head p{ font-size:11px; line-height:1.8; color:#8a9976; max-width:460px; margin:0; }
.review-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:start; }
.review-list{ display:grid; gap:14px; }
.client-review-card{ background:#fff; border:1px solid #eef1e4; border-radius:12px; padding:20px; }
.client-review-card .stars{ color:#00b67a; font-size:12px; letter-spacing:1px; margin-bottom:10px; }
.client-review-card p{ font-size:11px; line-height:1.7; color:#5a6b4d; margin:0 0 12px; }
.client-review-card .meta{ display:flex; justify-content:space-between; align-items:center; font-size:9px; color:#8a9976; border-top:1px solid #eef1e4; padding-top:12px; }
.review-form{ background:#fff; border:1px solid #eef1e4; border-radius:14px; padding:26px; box-shadow:0 6px 20px rgba(32,45,22,.06); position:sticky; top:24px; }
.review-form h3{ font:600 16px 'Manrope',sans-serif; margin:0 0 6px; color:#1e2e15; }
.review-form > p{ font-size:10px; color:#8a9976; line-height:1.6; margin:0 0 18px; }
.review-form label{ font-size:10px; font-weight:600; color:#3a4a2a; display:block; margin:14px 0 6px; }
.review-form input, .review-form textarea{ width:100%; background:#fcfdf8; border:1px solid #dfe9cc; border-radius:8px; padding:11px 12px; font:11px 'DM Sans',sans-serif; color:#1e2e15; outline:none; transition: border .2s, box-shadow .2s; }
.review-form input:focus, .review-form textarea:focus{ border-color:#8ca650; box-shadow:0 0 0 3px rgba(140,166,80,.14); background:#fff; }
.review-form textarea{ min-height:92px; resize:vertical; }
.star-input{ display:flex; gap:6px; margin:6px 0 4px; }
.star-input button{ width:36px; height:36px; border-radius:8px; border:1px solid #e2e7d6; background:#fcfdf8; cursor:pointer; font-size:16px; color:#c2cdb4; transition: all .15s; }
.star-input button.active{ background:#00b67a; color:#fff; border-color:#00a36d; transform:translateY(-1px); }
.star-input button:hover{ border-color:#00b67a; color:#00b67a; }
.review-form .submit{ width:100%; background:#1a2315; color:#eaf3de; border:1px solid #263321; padding:13px 18px; border-radius:8px; font:600 11px 'Manrope',sans-serif; cursor:pointer; margin-top:16px; transition: all .2s; }
.review-form .submit:hover{ background:#263321; transform:translateY(-1px); box-shadow:0 8px 18px rgba(32,45,22,.12); }
.review-form .submit:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.review-toast{ margin-top:12px; padding:10px 12px; border-radius:8px; font-size:10px; display:none; }
.review-toast.ok{ background:#e6f5ec; border:1px solid #c8e6d6; color:#1e3a2d; }
.review-toast.err{ background:#fef0e6; border:1px solid #ffdac1; color:#7a3a15; }
.sample-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:900px){
  .banner-slide{ grid-template-columns:1fr; padding:30px; gap:24px; }
  .banner-visual img{ height:280px; transform:none !important; }
  .review-grid{ grid-template-columns:1fr; }
  .review-form{ position:static; }
  .sample-gallery{ grid-template-columns:1fr 1fr; }
}
@media(max-width:640px){
  .banner-slide{ padding:24px; }
  .banner-slide h2{ font-size:30px; }
  .banner-visual img{ height:220px; }
  .review-section{ padding:28px 20px; }
  .sample-gallery{ grid-template-columns:1fr; }
}

/* ——— Reachmark Crystal Rebuild — 🍋‍🟩 crystal green, Black + Green typography, bigger logo, using generated banners to reshape ——— */
html{ background:#eef6d1 }
body{ background:#eef6d1 !important; color:#0f1a0a !important }
nav{ background:#ffffff !important; border-color:#e2e7d6 !important; padding:18px 6% !important; box-shadow:0 2px 12px rgba(32,45,22,.06) !important }
.logo{ width:200px !important; filter:drop-shadow(0 2px 10px rgba(32,45,22,.08)) }
@media(max-width:850px){ .logo{ width:180px !important } }
@media(max-width:640px){ .logo{ width:160px !important } nav{ padding:21px 6% !important } }
.nav-links{ color:#2d4a0a !important }
.nav-links a{ color:#0f1a0a !important }
.nav-links a:hover{ color:#1a3310 !important }
.nav-links a[href="/signin"]{ background:#d5f268 !important; border-color:#cbe85b !important; color:#0f1a0a !important }

/* Crystal globals — cards, honest, sections use generated-banner palette */
.card{ background:#f7fbd9 !important; border-color:#d8e9b8 !important; box-shadow:0 6px 24px rgba(45,90,10,.07) !important }
.card h3{ color:#0f1a0a !important }
.card p{ color:#2d4a0a !important }
.card small{ color:#4a6428 !important; border-color:#d8e9b8 !important }
.honest{ background:#f7fbd9 !important; border-color:#d8e9b8 !important }
.honest h2{ color:#0f1a0a !important }
.honest p{ color:#2d4a0a !important }
.honest strong{ color:#1a3310 !important }
.section-head h2{ color:#0f1a0a !important }
.section-head p{ color:#2d4a0a !important }
.eyebrow{ color:#3a7a0a !important }
.ribbon{ border-color:#d8e9b8 !important; color:#2d4a0a !important }

/* Hero in the middle — crystal, generous, using banner-generated editorial feel */
.hero{ background:linear-gradient(180deg, #eef6d1 0%, #e6f3c0 55%, #f7fbd9 100%) !important; border:1px solid #d8e9b8 !important; border-radius:24px !important; padding:64px 48px !important; margin:48px auto 72px !important; box-shadow:0 16px 48px rgba(45,90,10,.09) !important; gap:70px !important }
.hero h1{ color:#0f1a0a !important }
.hero h1 span{ color:#3a7a0a !important }
.hero p{ color:#2d4a0a !important }
.hero-note{ color:#4a6428 !important }
.art{ background:#0f1a0a !important; border-color:#1a3310 !important }
.art-caption{ color:#d5f268 !important }

/* Banners at the top — keep light crystal editorial, not dark */
.banner-carousel{ margin:28px auto 0 !important }
.banner-viewport{ background:#ffffff !important; border-color:#d8e9b8 !important; box-shadow:0 20px 52px rgba(45,90,10,.10) !important }
.banner-slide::before{ background:radial-gradient(ellipse at 70% 50%, rgba(213,242,104,.30) 0%, transparent 58%), linear-gradient(135deg, #f7fbd9 0%, #eef6d1 100%) !important }
.banner-slide h2{ color:#0f1a0a !important }
.banner-slide h2 em{ color:#3a7a0a !important }
.banner-slide .banner-sub{ color:#2d4a0a !important }
.banner-kicker{ color:#3a7a0a !important }
.banner-kicker span{ background:#3a7a0a !important }
.banner-proof span{ background:#eef6d1 !important; border-color:#d8e9b8 !important; color:#2d4a0a !important }

/* Carousel-3D — crystal */
.carousel-viewport{ background:linear-gradient(135deg,#f7fbd9 0%,#ffffff 100%) !important; border-color:#d8e9b8 !important }
.carousel-slide h3{ color:#0f1a0a !important }
.carousel-slide p{ color:#2d4a0a !important }
.carousel-slide .eyebrow{ color:#3a7a0a !important }

/* Sample cards, trust, review, cta — crystal */
.figma-card, .trustpilot-section, .review-section{ background:#f7fbd9 !important; border-color:#d8e9b8 !important }
.trust-card, .client-review-card, .review-form{ background:#ffffff !important; border-color:#d8e9b8 !important }
.figma-card h4, .trustpilot-head h2, .review-head h2{ color:#0f1a0a !important }
.figma-card p, .trust-card p, .client-review-card p{ color:#2d4a0a !important }
.cta{ background:linear-gradient(135deg,#0f1a0a 0%,#1a3310 100%) !important; border:1px solid #1a3310 !important }
.cta h2{ color:#eef6d1 !important }
.cta p{ color:#c8deb6 !important }

/* Footer stays dark for contrast, but world-badge removed */
.world-footer{ margin-top:80px !important }


/* ——— Premium Nav Motion — dynamic, sticky, glass on scroll ——— */
nav, .public-nav{position:sticky !important; top:0 !important; z-index:50 !important; transition: padding .35s var(--premium-ease), background .35s var(--premium-ease), box-shadow .35s var(--premium-ease), border-color .35s var(--premium-ease), backdrop-filter .35s var(--premium-ease) !important; will-change: padding, background, box-shadow;}
@keyframes navSlideDown{from{transform:translateY(-100%); opacity:0} to{transform:none; opacity:1}}
nav, .public-nav{animation: navSlideDown .7s .15s both var(--premium-ease);}
nav.scrolled, .public-nav.scrolled{padding:14px 6% !important; background:rgba(255,255,255,0.88) !important; backdrop-filter:blur(12px) saturate(1.2) !important; box-shadow:0 8px 32px rgba(32,45,22,.10) !important; border-color:rgba(212,230,184,.7) !important;}
[data-theme="dark"] nav.scrolled, [data-theme="dark"] .public-nav.scrolled{background:rgba(27,37,24,0.88) !important; box-shadow:0 8px 32px rgba(0,0,0,.28) !important; border-color:#2a3a22 !important;}
nav .logo, .public-nav .public-logo, .public-nav img{transition: width .35s var(--premium-ease), transform .35s var(--premium-ease);}
nav.scrolled .logo, .public-nav.scrolled .public-logo{width:170px !important; transform:translateY(0) !important;}
@media(max-width:640px){ nav.scrolled .logo, .public-nav.scrolled .public-logo{width:150px !important;} }
.nav-links a, .public-links a{position:relative; transition: color .25s var(--premium-ease), transform .25s var(--premium-ease);}
.nav-links a::after, .public-links a::after{content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--premium-ease); opacity:.5;}
.nav-links a:hover::after, .public-links a:hover::after{transform:scaleX(1);}
.nav-links a:hover, .public-links a:hover{transform:translateY(-1px);}
#theme-toggle-public{transition: transform .3s var(--premium-ease), background .3s, border-color .3s;}
#theme-toggle-public:hover{transform:rotate(15deg) scale(1.05);}
#theme-toggle-public:active{transform:scale(.95);}

/* ——— Desktop Premium — Modern, Horizontal, Dynamic (not straight like mobile) ——— */
@media(min-width:1100px){
  /* Page stays airy, centered but not straight — wider, with breathing */
  main{max-width:1440px; padding:0 4.5% !important;}
  nav{max-width:1440px; padding:22px 4.5% !important;}

  /* HERO: more horizontal, asymmetric, premium like banners */
  .hero{grid-template-columns:1.25fr .95fr !important; gap:56px !important; padding:72px 52px !important; border-radius:28px !important; margin:56px auto 84px !important; position:relative; overflow:visible !important;}
  .hero::after{content:''; position:absolute; right:-18px; top:-18px; width:120px; height:120px; background:radial-gradient(circle at 30% 30%, #d5f268 0%, transparent 62%); opacity:.28; pointer-events:none; filter:blur(1px);}
  .hero-copy h1{font-size:68px !important; line-height:.98 !important; letter-spacing:-3.8px !important;}
  .hero-copy p{font-size:13px !important; max-width:520px !important;}
  .art{transform:rotate(-1.5deg); transition: transform .6s var(--premium-ease);}
  .art:hover{transform:rotate(0) scale(1.01);}
  .art-label{font-size:10px !important; padding:14px 18px !important;}
  .art-label span{font-size:18px !important;}

  /* RIBBON: horizontal, pill-like, not straight line */
  .ribbon{padding:28px 24px !important; border:1px solid #d8e9b8; border-radius:16px; background:rgba(255,255,255,.72); backdrop-filter:blur(8px); margin:0 0 88px !important; justify-content:center !important; gap:42px !important;}
  .ribbon span{font-size:10px !important;}

  /* BANNERS: more cinematic, horizontal, populate the web */
  .banner-carousel{padding:0 4.5% !important; margin:32px auto 0 !important;}
  .banner-viewport{border-radius:22px !important;}
  .banner-slide{grid-template-columns:1.1fr .95fr !important; gap:48px !important; padding:52px 56px !important; min-height:460px;}
  .banner-slide h2{font-size:42px !important;}
  .banner-visual img{max-width:600px !important; height:400px !important;}

  /* 3D CAROUSEL: horizontal, not stacked */
  .carousel-3d{padding:0 4.5% !important; margin:72px auto 88px !important;}
  .carousel-3d-hero img{height:460px !important;}
  .carousel-slide{grid-template-columns:1.15fr .85fr !important; gap:48px !important; padding:56px !important;}
  .carousel-slide h3{font-size:36px !important;}

  /* FEATURES: staggered horizontal, not straight grid */
  .features{grid-template-columns:repeat(3,1fr) !important; gap:28px !important; margin-bottom:96px !important; align-items:stretch;}
  .features .card{padding:34px !important; border-radius:18px !important; transform:translateY(0); transition: transform .35s var(--premium-ease), box-shadow .35s;}
  .features .card:nth-child(2){transform:translateY(14px);}
  .features .card:hover{transform:translateY(-6px) !important; box-shadow:0 18px 44px rgba(32,45,22,.10) !important;}
  .features .card:nth-child(2):hover{transform:translateY(8px) !important;}

  /* HONEST: side-by-side, spacious, not straight stack */
  .honest{grid-template-columns:1.05fr 1.35fr !important; gap:64px !important; padding:56px 52px !important; border-radius:18px !important; margin-bottom:88px !important; align-items:center;}
  .honest h2{font-size:34px !important;}

  /* SAMPLES: horizontal populating — 3-up with hover lift, not vertical stack */
  .figma-grid, .sample-gallery{grid-template-columns:repeat(3,1fr) !important; gap:24px !important;}
  .figma-card, .sample-section .card{border-radius:18px !important;}
  .figma-card:hover{transform:translateY(-8px) scale(1.015) !important;}

  /* TRUSTPILOT / REVIEW: keep horizontal */
  .trustpilot-grid{grid-template-columns:repeat(3,1fr) !important;}
  .review-grid{grid-template-columns:1.2fr .9fr !important;}

  /* CTA: wider, more premium, horizontal */
  .cta{padding:62px 56px !important; border-radius:20px !important; margin-bottom:80px !important; display:grid !important; grid-template-columns:1.2fr .8fr; align-items:center; gap:32px;}
  .cta h2{font-size:36px !important;}
}
@media(min-width:1440px){
  main, nav{max-width:1480px;}
  .hero{padding:84px 64px !important;}
  .banner-slide{padding:56px 64px !important;}
}
@media(max-width:1099px){
  /* Mobile stays clean straight stack — no premium horizontal */
  .hero, .banner-slide, .carousel-slide, .honest, .features{transform:none !important;}
}

/* —— Premium Stable UX — no auto enlarge/shrink on touch, only on user pinch —— */
html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }
img, svg, video{ max-width:100%; height:auto; }
/* Prevent hover-induced enlarging on touch devices — hover only where supported */
@media(hover:none), (pointer:coarse){
  .figma-card, .trust-card, .carousel-mock img, .banner-visual img{ transition:none !important; }
  /* keep reveal without scale */
  .premium-reveal{ transform:translateY(12px) !important; }
}
/* Carousels: allow vertical scroll, handle horizontal swipe ourselves, no page move */
.banner-viewport, .carousel-viewport{ touch-action: pan-y pinch-zoom; overscroll-behavior: contain; -webkit-overflow-scrolling:touch; }
/* Buttons: hover lift only on fine pointer */
@media(hover:hover) and (pointer:fine){
  .button:hover{ transform:translateY(-1px); }
  .carousel-arrows button:hover, .banner-arrows button:hover{ transform:translateY(-1px); }
} 
/* Remove tap highlight shift */
*{ -webkit-tap-highlight-color: transparent; }
a, button{ touch-action: manipulation; }

/* —— Bright readable — premium but crisp —— */
body{ color:#0f1a0a !important; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.card p, .honest p, .carousel-slide p, .banner-sub, .trust-card p, .client-review-card p, .review-form p{ color:#1e2e15 !important; font-weight:500 !important; }
.figma-card p, .sample-section p, .section-head p{ color:#1e2e15 !important; }
.eyebrow, .banner-kicker, .public-eyebrow{ color:#1a3310 !important; font-weight:700 !important; }
h1,h2,h3{ color:#0f1a0a !important; }
small, .hero-note, .art-caption{ color:#2d4a0a !important; font-weight:600 !important; }