:root {
   --bg: #ffffff;
   --bg2: #f7f7fb;
   --card: rgba(255, 255, 255, 0.92);
   --card2: rgba(255, 255, 255, 0.98);
   --border: rgba(20, 20, 32, 0.12);
   --text: rgba(20, 20, 32, 0.95);
   --muted: rgba(20, 20, 32, 0.68);
   --brand: #ff4fa7;
   --brand2: #141420;
   --shadow: 0 20px 60px rgba(20, 20, 32, 0.16);
   --radius: 18px;
 }
 
 * { box-sizing: border-box; }
 
 html, body {
   height: 100%;
 }
 
 body {
   margin: 0;
   font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
   color: var(--text);
   background:
     radial-gradient(900px 600px at 12% 0%, rgba(255, 79, 167, 0.14), transparent 55%),
     radial-gradient(900px 600px at 80% 20%, rgba(255, 79, 167, 0.10), transparent 55%),
     linear-gradient(180deg, var(--bg), var(--bg2));
 }
 
 a { color: inherit; text-decoration: none; }
 
 .container {
   width: min(1120px, calc(100% - 40px));
   margin: 0 auto;
 }
 
 .site-header {
   position: sticky;
   top: 0;
   z-index: 50;
   backdrop-filter: blur(10px);
   background: rgba(255, 255, 255, 0.78);
   border-bottom: 1px solid rgba(20, 20, 32, 0.10);
 }
 
 .header-inner {
   display: grid;
   grid-template-columns: 1fr auto auto;
   align-items: center;
   gap: 16px;
   padding: 14px 0;
 }
 
 .brand {
   display: flex;
   align-items: center;
   gap: 12px;
 }

 .brand-logo {
   width: 44px;
   height: 44px;
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.92);
   padding: 6px;
   box-shadow: var(--shadow);
   object-fit: contain;
   display: block;
 }
 
 .brand-mark {
   width: 120px;
   height: 120px;
   display: grid;
   place-items: center;
   border-radius: 28px;
   background: linear-gradient(135deg, rgba(255, 79, 167, 0.95), rgba(255, 79, 167, 0.70));
   box-shadow: var(--shadow);
   font-weight: 800;
   letter-spacing: 0.5px;
 }

 .brand-mark img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 28px;
   display: block;
 }
 
 .brand-name {
   font-weight: 700;
   line-height: 1.1;
 }
 
 .brand-tag {
   font-size: 12px;
   color: var(--muted);
 }
 
 .nav {
   display: flex;
   gap: 18px;
 }
 
 .nav-link {
   font-size: 14px;
   color: rgba(20, 20, 32, 0.82);
   transition: color 160ms ease;
 }
 
 .nav-link:hover { color: rgba(20, 20, 32, 0.98); }
 
 .header-actions {
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
 .lang-toggle {
   border: 1px solid rgba(20, 20, 32, 0.14);
   background: rgba(255, 255, 255, 0.85);
   border-radius: 999px;
   padding: 6px;
   color: var(--text);
   cursor: pointer;
 }
 
 .lang-pill {
   display: inline-block;
   min-width: 34px;
   padding: 6px 10px;
   border-radius: 999px;
   background: rgba(20, 20, 32, 0.06);
   font-weight: 700;
   font-size: 12px;
 }
 
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 11px 16px;
   border-radius: 12px;
   border: 1px solid transparent;
   font-weight: 600;
   font-size: 14px;
   cursor: pointer;
   transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
 }
 
 .btn:active { transform: translateY(1px); }
 
 .btn-primary {
   background: linear-gradient(135deg, rgba(255, 79, 167, 0.95), rgba(255, 79, 167, 0.70));
   box-shadow: 0 16px 40px rgba(255, 79, 167, 0.18);
   color: white;
 }
 
 .btn-primary:hover {
   background: linear-gradient(135deg, rgba(255, 79, 167, 1), rgba(255, 79, 167, 0.82));
 }
 
 .btn-secondary {
   background: rgba(255, 255, 255, 0.92);
   border-color: rgba(20, 20, 32, 0.14);
   color: rgba(20, 20, 32, 0.92);
 }
 
 .btn-secondary:hover {
   background: rgba(255, 255, 255, 0.98);
 }
 
 .btn-block { width: 100%; }
 
 .mobile-menu {
   display: none;
   width: 44px;
   height: 44px;
   border-radius: 12px;
   border: 1px solid rgba(20, 20, 32, 0.12);
   background: rgba(255, 255, 255, 0.88);
   cursor: pointer;
 }
 
 .mobile-menu span {
   display: block;
   height: 2px;
   width: 20px;
   margin: 5px auto;
   background: rgba(20, 20, 32, 0.86);
   border-radius: 99px;
 }
 
 .mobile-nav {
   border-top: 1px solid rgba(20, 20, 32, 0.10);
   background: rgba(255, 255, 255, 0.94);
 }
 
 .mobile-nav-inner {
   display: grid;
   gap: 10px;
   padding: 14px 0 18px;
 }
 
 .mobile-link {
   padding: 10px 12px;
   border-radius: 12px;
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid rgba(20, 20, 32, 0.10);
 }
 
 .hero {
   padding: 64px 0 20px;
 }
 
 .hero-inner {
   display: grid;
   grid-template-columns: 1.15fr 0.85fr;
   gap: 32px;
   align-items: center;
 }
 
 .badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.92);
   border: 1px solid rgba(20, 20, 32, 0.12);
   color: rgba(20, 20, 32, 0.78);
   font-size: 13px;
 }
 
 .hero-title {
   margin: 16px 0 10px;
   font-size: clamp(34px, 4vw, 56px);
   line-height: 1.05;
   letter-spacing: -0.6px;
 }
 
 .hero-subtitle {
   margin: 0 0 18px;
   font-size: 16px;
   color: var(--muted);
   max-width: 56ch;
 }
 
 .hero-cta {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
 }
 
 .hero-meta {
   margin-top: 22px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
 }
 
 .meta-card {
   padding: 14px;
   background: rgba(255, 255, 255, 0.92);
   border: 1px solid rgba(20, 20, 32, 0.10);
   border-radius: 14px;
 }
 
 .meta-title {
   font-size: 12px;
   color: var(--muted);
 }
 
 .meta-value {
   margin-top: 6px;
   font-weight: 600;
 }
 
 .hero-card {
   border-radius: var(--radius);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92));
   border: 1px solid rgba(20, 20, 32, 0.12);
   box-shadow: var(--shadow);
   overflow: hidden;
 }
 
 .hero-card-top {
   display: flex;
   gap: 10px;
   padding: 14px;
   border-bottom: 1px solid rgba(20, 20, 32, 0.10);
 }
 
 .sparkle {
   width: 10px;
   height: 10px;
   border-radius: 999px;
   background: rgba(20, 20, 32, 0.10);
 }
 
 .hero-card-body {
   padding: 18px;
 }
 
 .placeholder {
   border-radius: 14px;
   border: 1px dashed rgba(20, 20, 32, 0.22);
   background: rgba(20, 20, 32, 0.03);
   padding: 22px;
   min-height: 220px;
   display: grid;
   place-items: center;
   text-align: center;
 }
 
 .placeholder-title {
   font-weight: 700;
   margin-bottom: 6px;
 }
 
 .placeholder-sub {
   color: var(--muted);
   font-size: 13px;
 }
 
 .hero-card-bottom {
   display: flex;
   gap: 10px;
   padding: 14px;
   border-top: 1px solid rgba(20, 20, 32, 0.10);
   flex-wrap: wrap;
 }
 
 .chip {
   font-size: 12px;
   padding: 7px 10px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.92);
   border: 1px solid rgba(20, 20, 32, 0.12);
   color: rgba(20, 20, 32, 0.80);
 }
 
 .section {
   padding: 56px 0;
 }
 
 .section-alt {
   background: rgba(20, 20, 32, 0.03);
   border-top: 1px solid rgba(20, 20, 32, 0.08);
   border-bottom: 1px solid rgba(20, 20, 32, 0.08);
 }
 
 .section-head {
   display: grid;
   gap: 10px;
   margin-bottom: 18px;
 }
 
 .section-title {
   margin: 0;
   font-size: 28px;
 }
 
 .section-subtitle {
   margin: 0;
   color: var(--muted);
   max-width: 70ch;
 }
 
 .grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px;
 }
 
 .tile {
   border-radius: 16px;
   overflow: hidden;
   background: rgba(255, 255, 255, 0.92);
   border: 1px solid rgba(20, 20, 32, 0.10);
 }
 
 .tile-media {
   height: 150px;
   background:
     radial-gradient(140px 100px at 25% 15%, rgba(255, 79, 167, 0.35), transparent 60%),
     radial-gradient(160px 110px at 75% 30%, rgba(255, 79, 167, 0.18), transparent 55%),
     linear-gradient(135deg, rgba(255, 79, 167, 0.10), rgba(255, 79, 167, 0.03));
 }
 
 .tile-media-2 { filter: none; }
 .tile-media-3 { filter: none; }
 .tile-media-4 { filter: none; }
 
 .tile-body {
   padding: 12px;
 }
 
 .tile-title {
   font-weight: 700;
   margin-bottom: 2px;
 }
 
 .tile-tag {
   color: var(--muted);
   font-size: 12px;
 }
 
 .section-foot {
   margin-top: 16px;
 }
 
 .ig-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 14px;
 }
 
 .ig-embed {
   border-radius: var(--radius);
   background: rgba(255, 255, 255, 0.92);
   border: 1px solid rgba(20, 20, 32, 0.10);
   overflow: hidden;
 }
 
 .ig-embed .instagram-media {
   margin: 0 !important;
   width: 100% !important;
   max-width: 100% !important;
 }
 
 .steps {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px;
 }
 
 .step {
   padding: 16px;
   border-radius: 16px;
   background: rgba(255, 255, 255, 0.92);
   border: 1px solid rgba(20, 20, 32, 0.10);
 }
 
 .step-num {
   width: 36px;
   height: 36px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   font-weight: 800;
   background: rgba(20, 20, 32, 0.06);
   border: 1px solid rgba(20, 20, 32, 0.12);
 }
 
 .step-title {
   margin-top: 12px;
   font-weight: 700;
 }
 
 .step-desc {
   margin-top: 6px;
   color: var(--muted);
   font-size: 13px;
   line-height: 1.45;
 }
 
 .quote-layout {
   display: grid;
   grid-template-columns: 1.1fr 0.9fr;
   gap: 16px;
   align-items: start;
 }
 
 .form {
   padding: 18px;
   border-radius: var(--radius);
   background: rgba(255, 255, 255, 0.92);
   border: 1px solid rgba(20, 20, 32, 0.10);
 }
 
 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
 }
 
 .field { margin-bottom: 12px; }
 
 label {
   display: block;
   font-size: 12px;
   color: rgba(20, 20, 32, 0.82);
   margin-bottom: 6px;
 }
 
 input, select, textarea {
   width: 100%;
   border-radius: 12px;
   border: 1px solid rgba(20, 20, 32, 0.14);
   background: rgba(255, 255, 255, 0.96);
   color: var(--text);
   padding: 10px 12px;
   outline: none;
 }
 
 textarea { resize: vertical; }
 
 input:focus, select:focus, textarea:focus {
   border-color: rgba(255, 79, 167, 0.55);
   box-shadow: 0 0 0 4px rgba(255, 79, 167, 0.14);
 }
 
 .form-status {
   margin-top: 10px;
   font-size: 13px;
   color: var(--muted);
 }
 
 .form-actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
   margin-top: 12px;
 }
 
 .check-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 10px;
 }
 
 .check {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   padding: 10px 12px;
   border-radius: 14px;
   background: rgba(20, 20, 32, 0.03);
   border: 1px solid rgba(20, 20, 32, 0.10);
 }
 
 .check input {
   margin-top: 2px;
 }
 
 .quote-side {
   display: grid;
   gap: 12px;
 }
 
 .card {
   padding: 16px;
   border-radius: var(--radius);
   background: rgba(255, 255, 255, 0.92);
   border: 1px solid rgba(20, 20, 32, 0.10);
 }
 
 .card-title {
   font-weight: 800;
   margin-bottom: 6px;
 }
 
 .card-sub {
   color: var(--muted);
   font-size: 13px;
   margin-bottom: 12px;
 }
 
 .card-actions {
   display: grid;
   gap: 10px;
 }
 
 .muted {
   color: var(--muted);
   font-size: 12px;
   margin-top: 10px;
 }
 
 .link {
   color: rgba(20, 20, 32, 0.92);
   text-decoration: underline;
   text-underline-offset: 3px;
 }
 
 .contact-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
 }
 
 .site-footer {
   margin-top: 22px;
   padding-top: 18px;
   border-top: 1px solid rgba(20, 20, 32, 0.08);
 }
 
 @media (max-width: 980px) {
   .header-inner { grid-template-columns: 1fr auto auto; }
   .nav { display: none; }
   .mobile-menu { display: inline-block; }
 
   .hero-inner {
     grid-template-columns: 1fr;
   }
 
   .hero-meta {
     grid-template-columns: 1fr;
   }
 
   .grid { grid-template-columns: repeat(2, 1fr); }
   .steps { grid-template-columns: repeat(2, 1fr); }
   .ig-grid { grid-template-columns: 1fr; }
   .quote-layout { grid-template-columns: 1fr; }
   .contact-grid { grid-template-columns: 1fr; }
 }
 
 @media (max-width: 520px) {
   .header-actions .btn { display: none; }
   .grid { grid-template-columns: 1fr; }
   .steps { grid-template-columns: 1fr; }
   .form-row { grid-template-columns: 1fr; }
   .form-actions { grid-template-columns: 1fr; }
 }