:root{
    --space:#4B1B2B;
    --space-deep:#2A0F18;
    --card-bg:rgba(255,255,255,0.045);
    --card-border:rgba(255,255,255,0.10);
    --ice:#F5EDEA;
    --muted:#C9A8AA;
    --sun1:#F0D48A;
    --sun2:#D4AF37;
    --sun3:#B8860B;
    --nebula-blue:#6B3A44;
    --nebula-purple:#8B0000;
    --nebula-pink:#D32F2F;
    --mint:#CBB26A;
    --radius:22px;
    --maxw:1180px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  body{
    margin:0;
    background:var(--space);
    color:var(--ice);
    font-family:'Poppins', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  h1,h2,h3{
    font-family:'Playfair Display', serif;
    margin:0;
    letter-spacing:-0.01em;
  }

  a{color:inherit;}
  img,svg{display:block;}

  .grad-text{
    background:linear-gradient(95deg, var(--sun1), var(--sun2) 50%, var(--sun3));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .wrap{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 24px;
    position:relative;
    z-index:2;
  }

  /* ---------- NAV ---------- */
  header.nav{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(58,16,18,0.72);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--card-border);
  }
  .nav-inner{
    max-width:var(--maxw);
    margin:0 auto;
    padding:20px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .logo{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .logo-img{
    height:68px;
    width:auto;
    display:block;
  }
  nav.links{
    display:flex;
    gap:30px;
    font-size:14.5px;
    font-weight:500;
    color:var(--muted);
  }
  nav.links a{text-decoration:none; transition:color .15s ease;}
  nav.links a:hover, nav.links a:focus-visible{color:var(--ice);}

  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'Poppins', sans-serif;
    font-weight:600;
    font-size:14.5px;
    text-decoration:none;
    padding:12px 24px;
    border-radius:999px;
    border:1.5px solid transparent;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .2s ease;
    white-space:nowrap;
  }
  .btn:focus-visible{outline:2px solid var(--sun1); outline-offset:3px;}
  .btn-call{
    background:linear-gradient(95deg, var(--sun1), var(--sun2), var(--sun3));
    background-clip:padding-box;
    border:none;
    color:#2A0F18;
    box-shadow:0 8px 22px rgba(212,175,55,0.35);
  }
  .btn-call:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(212,175,55,0.5);}
  .btn-wa{
    background:rgba(255,255,255,0.03);
    border:1.5px solid var(--card-border);
    color:var(--ice);
  }
  .btn-wa:hover{border-color:var(--mint); background:rgba(203,178,106,0.08);}
  .btn-wa svg{color:var(--mint);}
  .btn-wa-solid{
    background:#25D366;
    background-clip:padding-box;
    border:none;
    color:#0A1A0F;
    box-shadow:0 8px 22px rgba(37,211,102,0.35);
  }
  .btn-wa-solid:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(37,211,102,0.5);}
  .nav-inner .btn-wa-solid{padding:8px 16px; gap:6px; font-size:12px;}

  /* ---------- ECLIPSE REVEAL WRAPPER ---------- */
  .reveal-stage{
    position:relative;
  }
  /* typewriter reveal */
  .type-target{position:relative; display:inline-block; padding-right:12px;}
  .type-target.no-linger{padding-right:0;}
  :where(html.js) .type-target.pretype{color:transparent;}
  .type-target.typing::after, .type-target.typed::after{
    content:'';
    display:inline-block;
    width:3px;
    height:0.85em;
    margin-left:4px;
    vertical-align:-0.08em;
    background:var(--sun1);
    box-shadow:0 0 8px 1px rgba(212,175,55,0.7);
    opacity:1;
  }
  .type-target.no-linger.typing::after, .type-target.no-linger.typed::after{content:none;}
  html.caret-off .type-target.typing::after,
  html.caret-off .type-target.typed::after{opacity:0;}

  :where(html.js) .hero-highlight{opacity:0; transform:translateY(6px);}
  .hero-highlight{transition:opacity .5s ease, transform .5s ease;}
  .hero-highlight.show{opacity:1; transform:translateY(0);}

  .final-caret{
    display:inline-block;
    width:3px;
    height:0.85em;
    margin-left:6px;
    vertical-align:-0.08em;
    background:var(--sun1);
    box-shadow:0 0 8px 1px rgba(212,175,55,0.7);
    transition:opacity .3s ease;
  }
  :where(html.js) .final-caret{opacity:0;}
  .final-caret.show{opacity:1;}
  html.caret-off .final-caret.show{opacity:0;}

  .fade-up{
    transition:opacity .6s ease, transform .6s ease;
  }
  :where(html.js) .fade-up{opacity:0; transform:translateY(24px);}
  .fade-up.visible{opacity:1; transform:translateY(0);}

  /* ---------- HERO ---------- */
  .hero{position:relative; padding:112px 0 96px; overflow:hidden;}
  .hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:
      radial-gradient(ellipse 50% 55% at 50% -10%, rgba(212,175,55,0.16), transparent 70%),
      linear-gradient(180deg, rgba(0,0,0,0.1), transparent 45%);
    pointer-events:none;
    z-index:0;
  }
  .hero .wrap{position:relative; z-index:1;}

  .hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}
  .eyebrow{
    font-size:13px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--sun1);
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:16px;
  }
  @keyframes twk{0%,100%{opacity:1;} 50%{opacity:0.3;}}

  .slogan{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:16px;
  }
  .slogan .dash{width:22px; height:1.5px; border-radius:1px; flex:none;}
  .slogan .dash.l{background:linear-gradient(90deg, transparent, var(--sun1));}
  .slogan .dash.r{background:linear-gradient(90deg, var(--nebula-pink), transparent);}

  .hero h1{
    font-size:clamp(36px, 5.4vw, 62px);
    font-weight:700;
    line-height:1.1;
    color:var(--ice);
  }
  .hero p.lede{margin:24px 0 0; max-width:480px; color:var(--muted); font-size:17px;}
  .hero-cta{display:flex; flex-wrap:wrap; gap:16px; margin-top:32px;}
  .hero-cta .btn{padding:16px 32px; font-size:15px;}

  .status-strip{margin-top:40px; display:flex; gap:24px; flex-wrap:wrap; font-size:13px; color:var(--muted);}
  .status-strip span{display:flex; align-items:center; gap:8px;}
  .status-strip .dot{width:6px;height:6px;border-radius:50%; background:var(--mint); box-shadow:0 0 8px 2px var(--mint); animation:twk 1.8s ease-in-out infinite;}

  /* hero visual: an animated mockup of a site being built, with a customer reacting */
  .build-wrap{position:relative; width:100%; max-width:460px; margin:0 auto;}
  .browser-mock{
    position:relative;
    border-radius:16px;
    background:rgba(33,15,14,0.85);
    border:1px solid var(--card-border);
    box-shadow:0 24px 60px rgba(0,0,0,0.5), 0 0 50px rgba(139,0,0,0.14);
    overflow:hidden;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  }
  .browser-topbar{display:flex; align-items:center; gap:7px; padding:12px 14px; border-bottom:1px solid var(--card-border);}
  .browser-dot{width:8px;height:8px;border-radius:50%;}
  .browser-dot.r{background:var(--sun3);}
  .browser-dot.y{background:var(--sun2);}
  .browser-dot.g{background:var(--sun1);}
  .browser-url{
    flex:1; height:16px; border-radius:6px; background:rgba(255,255,255,0.06); margin-left:8px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Poppins', sans-serif; font-size:9px; font-weight:500;
    color:rgba(243,236,225,0.4); letter-spacing:0.02em; overflow:hidden; white-space:nowrap;
  }
  .browser-body{padding:20px; display:flex; flex-direction:column; gap:12px; min-height:230px;}

  .build-block{opacity:0; transform:translateY(10px) scaleX(0.92); transform-origin:left center;}
  .b-nav{height:14px; width:40%; border-radius:6px; background:linear-gradient(90deg, var(--sun1), var(--sun2)); animation:buildIn 7s ease-in-out infinite; animation-delay:0s;}
  .b-title{height:20px; width:80%; border-radius:6px; background:rgba(255,255,255,0.16); animation:buildIn 7s ease-in-out infinite; animation-delay:.35s;}
  .b-sub{height:12px; width:60%; border-radius:5px; background:rgba(255,255,255,0.08); animation:buildIn 7s ease-in-out infinite; animation-delay:.6s;}
  .b-btn{height:22px; width:32%; border-radius:999px; background:linear-gradient(95deg, var(--sun1), var(--sun3)); animation:buildIn 7s ease-in-out infinite; animation-delay:.9s;}
  .b-cards{display:flex; gap:8px; margin-top:6px;}
  .b-card{flex:1; height:52px; border-radius:8px; background:rgba(255,255,255,0.05); border:1px solid var(--card-border);}
  .b-card.c1{animation:buildIn 7s ease-in-out infinite; animation-delay:1.3s;}
  .b-card.c2{animation:buildIn 7s ease-in-out infinite; animation-delay:1.55s;}
  .b-card.c3{animation:buildIn 7s ease-in-out infinite; animation-delay:1.8s;}

  @keyframes buildIn{
    0%{opacity:0; transform:translateY(10px) scaleX(0.92);}
    8%{opacity:1; transform:translateY(0) scaleX(1);}
    82%{opacity:1; transform:translateY(0) scaleX(1);}
    92%{opacity:0; transform:translateY(6px) scaleX(0.96);}
    100%{opacity:0;}
  }

  .chat-bubble{
    position:absolute;
    right:-14px;
    bottom:34px;
    max-width:220px;
    background:#fff;
    color:#2A1810;
    border-radius:14px 14px 14px 4px;
    padding:10px 14px;
    font-family:'Poppins', sans-serif;
    font-size:13px;
    font-weight:500;
    line-height:1.4;
    box-shadow:0 14px 30px rgba(0,0,0,0.35);
    opacity:0;
    transform:translateY(10px) scale(0.9);
    animation:bubbleIn 7s ease-in-out infinite;
    animation-delay:2.1s;
  }
  .chat-bubble .who{display:block; font-size:11px; color:var(--mint); font-weight:700; margin-bottom:2px;}
  @keyframes bubbleIn{
    0%{opacity:0; transform:translateY(10px) scale(0.9);}
    6%{opacity:1; transform:translateY(0) scale(1);}
    82%{opacity:1; transform:translateY(0) scale(1);}
    92%{opacity:0; transform:translateY(6px) scale(0.94);}
    100%{opacity:0;}
  }

  /* ---------- SECTION generic ---------- */
  section{padding:96px 0; position:relative; z-index:2;}
  .section-head{display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:48px;}
  .section-head h2{font-size:clamp(28px, 3.4vw, 42px); color:var(--ice); max-width:640px; font-weight:700;}
  .section-head p{color:var(--muted); max-width:480px; margin:0; font-size:15px;}

  /* ---------- PRICING ---------- */
  .price-tabs{display:flex; gap:8px; margin-bottom:40px; flex-wrap:wrap;}
  .price-tab{
    font-family:'Poppins', sans-serif;
    font-weight:600;
    font-size:14px;
    color:var(--muted);
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:999px;
    padding:10px 22px;
    cursor:pointer;
    transition:color .15s ease, border-color .15s ease, background .15s ease;
  }
  .price-tab:hover{color:var(--ice); border-color:rgba(212,175,55,0.35); background:rgba(212,175,55,0.06);}
  .price-tab.active{color:#2A0F18; background:linear-gradient(95deg, var(--sun1), var(--sun3)); border-color:transparent;}
  .price-panel{display:none;}
  .price-panel.active{display:block;}
  .price-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
  .price-card{
    position:relative;
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:var(--radius);
    padding:28px 22px;
    display:flex;
    flex-direction:column;
    gap:14px;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .price-card:hover{transform:translateY(-6px); border-color:rgba(212,175,55,0.4); box-shadow:0 16px 34px rgba(212,175,55,0.16);}
  .price-card.featured{border-color:rgba(212,175,55,0.45); background:radial-gradient(ellipse 100% 60% at 50% 0%, rgba(212,175,55,0.14), transparent 70%), var(--card-bg);}
  .price-card.featured:hover{border-color:rgba(212,175,55,0.65); box-shadow:0 18px 38px rgba(212,175,55,0.28);}
  .price-badge{
    position:absolute; top:-12px; left:22px;
    background:linear-gradient(95deg, var(--sun1), var(--sun3));
    color:#2A0F18; font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
    padding:4px 12px; border-radius:999px;
  }
  .price-card-head h3{font-size:18px; color:var(--ice); font-weight:600;}
  .price-card-head p{margin:4px 0 0; font-size:13px; color:var(--muted);}
  .price-amount{font-size:28px; font-weight:700; color:var(--ice); font-family:'Playfair Display', serif;}
  .price-was{font-size:16px; font-weight:500; color:var(--muted); text-decoration:line-through; margin-right:8px; font-family:'Playfair Display', serif;}
  .price-now{color:var(--sun1);}
  .price-sale-tag{display:inline-block; margin-left:10px; vertical-align:middle; font-size:11px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--sun1); background:var(--space-deep); border:1px solid rgba(212,175,55,0.55); border-radius:999px; padding:3px 11px;}
  .price-amount span{font-size:14px; font-weight:500; color:var(--muted);}
  .price-sub{margin:-8px 0 0; font-size:12.5px; color:var(--mint);}
  .price-day{margin:-8px 0 0; font-size:12px; color:var(--muted); font-style:italic;}
  .price-feats{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; flex:1;}
  .price-feats li{position:relative; padding-left:20px; font-size:13.5px; color:var(--muted); line-height:1.5;}
  .price-feats li::before{content:"✓"; position:absolute; left:0; color:var(--mint); font-weight:700; font-size:12px;}
  .price-card .btn{justify-content:center; width:100%; margin-top:4px;}
  .btn-outline{background:transparent; color:var(--ice); border:1.5px solid var(--card-border);}
  .btn-outline:hover{border-color:var(--sun1); color:var(--sun1);}
  .price-note{margin:24px 0 0; font-size:12.5px; color:var(--muted); line-height:1.6;}
  .price-callout{margin:0 0 24px; font-size:13.5px; color:var(--sun1); background:rgba(212,175,55,0.08); border:1px solid rgba(212,175,55,0.25); border-radius:12px; padding:14px 18px;}

  .addon-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:64px;}
  .addon-block{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); padding:28px 24px; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;}
  .addon-block:hover{transform:translateY(-4px); border-color:rgba(212,175,55,0.3); box-shadow:0 14px 30px rgba(212,175,55,0.1);}
  .addon-block h3{font-size:16px; color:var(--ice); font-weight:600; margin-bottom:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .addon-tag{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--sun1); background:rgba(212,175,55,0.12); padding:3px 8px; border-radius:999px;}
  .addon-block > p{margin:0 0 16px; font-size:13px; color:var(--muted); line-height:1.55;}
  .addon-price{font-size:24px; font-weight:700; color:var(--ice); font-family:'Playfair Display', serif; margin-bottom:10px;}
  .addon-price span{font-size:13px; font-weight:500; color:var(--muted);}
  .addon-list{display:flex; flex-direction:column; gap:0;}
  .addon-row{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 8px; margin:0 -8px; border-top:1px solid var(--card-border); font-size:13px; border-radius:8px; transition:background .15s ease;}
  .addon-row:hover{background:rgba(212,175,55,0.06);}
  .addon-row:first-child{border-top:none;}
  .addon-row span:first-child{color:var(--muted);}
  .addon-price-stack{display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right;}
  .addon-price-stack .price-was{font-size:12px; margin-right:0;}
  .addon-price-stack .price-now{font-size:13px; font-weight:700;}
  .addon-price-stack small{color:var(--muted); font-size:11px;}
  .addon-row span:last-child{color:var(--ice); font-weight:600; white-space:nowrap;}
  .addon-row.featured-row{background:rgba(212,175,55,0.08); margin:6px -12px 0; padding:10px 12px; border-radius:10px; border-top:none;}
  .addon-row.featured-row small{color:var(--sun1); font-weight:600; font-size:11px;}

  @media (max-width:980px){
    .price-grid{grid-template-columns:1fr 1fr;}
    .addon-grid{grid-template-columns:1fr;}
  }
  @media (max-width:640px){
    .price-grid{grid-template-columns:1fr;}
  }

  /* ---------- FREE TOOLS ---------- */
  .tool-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  .tool-card{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); padding:28px 26px; transition:border-color .2s ease, box-shadow .2s ease;}
  .tool-card:hover{border-color:rgba(212,175,55,0.3); box-shadow:0 14px 30px rgba(212,175,55,0.1);}
  .tool-card h3{font-size:17px; color:var(--ice); font-weight:600; margin-bottom:6px;}
  .tool-desc{margin:0 0 20px; font-size:13px; color:var(--muted);}
  .tool-field{margin-bottom:14px;}
  .tool-field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px;}
  .tool-field select, .tool-field input[type=number]{
    width:100%;
    background:rgba(255,255,255,0.03);
    border:1px solid var(--card-border);
    border-radius:10px;
    padding:10px 12px;
    color:var(--ice);
    font-family:'Poppins', sans-serif;
    font-size:14px;
  }
  .tool-check-row{display:flex; flex-direction:column; gap:8px; margin:14px 0 20px; font-size:13px; color:var(--muted);}
  .tool-check-row label{display:flex; align-items:center; gap:8px;}
  .tool-result{
    display:flex; justify-content:space-between; align-items:center;
    background:rgba(212,175,55,0.08); border:1px solid rgba(212,175,55,0.25);
    border-radius:12px; padding:14px 16px; margin-bottom:14px; gap:12px;
  }
  .tool-result span{font-size:12.5px; color:var(--muted);}
  .tool-result strong{font-size:20px; color:var(--sun1); font-family:'Playfair Display', serif; white-space:nowrap;}
  .tool-result.secondary{background:rgba(107,58,68,0.08); border-color:rgba(107,58,68,0.25);}
  .tool-result.secondary strong{color:var(--sun1);}
  .tool-footnote{margin:0; font-size:12px; color:var(--muted); line-height:1.55;}
  #calcWaBtn{width:100%; justify-content:center;}
  @media (max-width:720px){ .tool-grid{grid-template-columns:1fr;} }

  /* ---------- FAQ ---------- */
  .faq-list{display:flex; flex-direction:column; gap:12px;}
  .faq-item{
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:14px;
    padding:6px 20px;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .faq-item:hover{border-color:rgba(212,175,55,0.3); box-shadow:0 10px 24px rgba(212,175,55,0.08);}
  .faq-item summary{
    list-style:none;
    cursor:pointer;
    padding:16px 0;
    font-size:15px;
    font-weight:600;
    color:var(--ice);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-plus{position:relative; width:16px; height:16px; flex:none;}
  .faq-plus::before, .faq-plus::after{
    content:""; position:absolute; background:var(--sun1); border-radius:1px; transition:transform .2s ease;
  }
  .faq-plus::before{width:16px; height:2px; top:7px; left:0;}
  .faq-plus::after{width:2px; height:16px; top:0; left:7px;}
  .faq-item[open] .faq-plus::after{transform:rotate(90deg); opacity:0;}
  .faq-item p{margin:0 0 18px; font-size:14px; color:var(--muted); line-height:1.6;}

  /* ---------- WHY US / COMPARE ---------- */
  .compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  .compare-col{
    border-radius:var(--radius);
    padding:32px 28px;
    border:1px solid var(--card-border);
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .compare-col:hover{transform:translateY(-4px);}
  .compare-col.usual{background:rgba(255,255,255,0.02);}
  .compare-col.usual:hover{border-color:rgba(219,208,194,0.25);}
  .compare-col.ours:hover{border-color:rgba(212,175,55,0.6); box-shadow:0 16px 34px rgba(212,175,55,0.18);}
  .compare-col.ours{
    background:radial-gradient(ellipse 100% 100% at 50% 0%, rgba(212,175,55,0.1), transparent 65%), var(--card-bg);
    border-color:rgba(212,175,55,0.35);
  }
  .compare-label{font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:20px;}
  .compare-col.usual .compare-label{color:var(--muted);}
  .compare-col.ours .compare-label{color:var(--sun1);}
  .compare-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
  .compare-col li{display:flex; align-items:flex-start; gap:12px; font-size:14.5px; line-height:1.5;}
  .compare-col.usual li{color:var(--muted);}
  .compare-col.ours li{color:var(--ice);}
  .compare-col li svg{flex:none; width:18px; height:18px; margin-top:2px;}
  .compare-col.usual li svg{color:#7a5a5a;}
  .compare-col.ours li svg{color:var(--mint);}
  @media (max-width:720px){
    .compare-grid{grid-template-columns:1fr;}
  }

  /* ---------- SERVICES ---------- */
  .services-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
  .service-card{
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:var(--radius);
    padding:32px 24px;
    display:flex;
    flex-direction:column;
    gap:16px;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    transition:opacity .5s ease, transform .35s ease, box-shadow .2s ease, border-color .2s ease;
  }
  :where(html.js) .service-card{opacity:0; transform:translateY(24px);}
  .service-card.visible{opacity:1; transform:translateY(0);}
  .service-card.visible:hover{transform:translateY(-6px);}
  .icon-wrap{width:48px;height:48px; border-radius:14px; display:flex;align-items:center;justify-content:center;}
  .icon-wrap svg{width:24px;height:24px;color:#fff;}
  .service-card:nth-child(1) .icon-wrap{background:linear-gradient(135deg, var(--sun1), var(--sun2));}
  .service-card:nth-child(1):hover{box-shadow:0 16px 34px rgba(212,175,55,0.2); border-color:rgba(212,175,55,0.4);}
  .service-card:nth-child(2) .icon-wrap{background:linear-gradient(135deg, var(--nebula-purple), var(--nebula-pink));}
  .service-card:nth-child(2):hover{box-shadow:0 16px 34px rgba(139,0,0,0.2); border-color:rgba(139,0,0,0.4);}
  .service-card:nth-child(3) .icon-wrap{background:linear-gradient(135deg, var(--nebula-blue), var(--mint));}
  .service-card:nth-child(3):hover{box-shadow:0 16px 34px rgba(107,58,68,0.2); border-color:rgba(107,58,68,0.4);}
  .service-card h3{font-size:19px; color:var(--ice); font-weight:600;}
  .service-card > p{margin:0; color:var(--muted); font-size:14px; line-height:1.6;}
  .service-tag{
    display:inline-block;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--space-deep);
    background:var(--sun1);
    padding:4px 10px;
    border-radius:999px;
    width:fit-content;
  }
  .service-card:nth-child(2) .service-tag{background:var(--sun1);}
  .service-card:nth-child(3) .service-tag{background:var(--mint);}
  .service-list{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:9px;}
  .service-list li{
    display:flex;
    align-items:flex-start;
    gap:9px;
    font-size:13.5px;
    color:var(--muted);
    line-height:1.5;
  }
  .service-list li svg{flex:none; width:15px;height:15px; margin-top:2px; color:var(--mint);}

  /* ---------- PROCESS (launch sequence) ---------- */
  .process-wrap{position:relative;}
  .process-path{
    position:absolute; left:29px; top:14px; bottom:14px; width:2px;
    background:linear-gradient(180deg, var(--sun1), var(--nebula-pink), var(--nebula-blue), var(--mint));
    opacity:0.5;
  }
  .process-list{padding-left:78px;}
  .process-item{position:relative; padding:0 0 48px;}
  .process-item:last-child{padding-bottom:0;}
  .process-tag{
    position:absolute; left:-78px; top:-2px;
    width:60px;height:60px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;
    font-size:14px;
    color:#2A0F18;
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
    background:var(--space);
    border:2px solid var(--card-border);
  }
  .process-item:nth-child(1) .process-tag{background:linear-gradient(135deg, #F2D998, var(--sun1)); border-color:transparent;}
  .process-item:nth-child(2) .process-tag{background:linear-gradient(135deg, #D9B94F, var(--sun2)); border-color:transparent;}
  .process-item:nth-child(3) .process-tag{background:linear-gradient(135deg, #C19528, var(--sun3)); border-color:transparent;}
  .process-item:nth-child(4) .process-tag{background:linear-gradient(135deg, #D84848, var(--nebula-pink)); border-color:transparent;}
  .process-item:nth-child(5) .process-tag{background:linear-gradient(135deg, #D1BB7C, var(--mint)); border-color:transparent;}
  .process-item h3{font-size:20px; color:var(--ice); font-weight:600; margin-bottom:6px; padding-top:10px;}
  .process-item p{margin:0; color:var(--muted); font-size:14.5px; max-width:560px;}

  /* ---------- VALUES ---------- */
  .values{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
  .value{
    padding:24px;
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:18px;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .value:hover{transform:translateY(-4px); border-color:rgba(212,175,55,0.35); box-shadow:0 14px 30px rgba(212,175,55,0.12);}
  .value .mark{font-size:24px; margin-bottom:12px; display:block;}
  .value h3{font-size:15px; color:var(--ice); font-weight:600; margin-bottom:6px;}
  .value p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.55;}
  .values .value:nth-child(1){transition-delay:.05s;}
  .values .value:nth-child(2){transition-delay:.14s;}
  .values .value:nth-child(3){transition-delay:.23s;}
  .values .value:nth-child(4){transition-delay:.32s;}

  /* ---------- CONTACT ---------- */
  .contact-panel{
    position:relative;
    padding:64px 48px;
    text-align:center;
    border-radius:28px;
    background:radial-gradient(ellipse 80% 100% at 50% -10%, rgba(212,175,55,0.16), transparent 60%), var(--card-bg);
    border:1px solid var(--card-border);
    overflow:hidden;
  }
  .contact-panel h2{font-size:clamp(28px, 4.2vw, 44px); color:var(--ice); max-width:640px; margin:0 auto 16px; font-weight:700;}
  .contact-panel p{color:var(--muted); max-width:460px; margin:0 auto 36px; font-size:15.5px;}

  /* ---------- FOOTER ---------- */
  footer{border-top:1px solid var(--card-border); padding:56px 0 0; position:relative; z-index:2;}
  .footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px; border-bottom:1px solid var(--card-border);}
  .footer-brand p{margin:0 0 16px; font-size:13px; color:var(--muted); line-height:1.6; max-width:320px;}
  .footer-col h4{font-size:13px; color:var(--ice); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:14px;}
  .footer-col{display:flex; flex-direction:column; gap:10px;}
  .footer-col a{color:var(--muted); font-size:13.5px; text-decoration:none; transition:color .15s ease;}
  .footer-col a:hover{color:var(--sun1);}
  .footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; color:var(--muted); font-size:13.5px; padding:20px 0;}
  @media (max-width:820px){
    .footer-grid{grid-template-columns:1fr 1fr; gap:32px 24px;}
  }
  @media (max-width:560px){
    .footer-grid{grid-template-columns:1fr;}
  }

  .mobile-bar{display:none;}

  /* ---------- FLOATING ACTION BUTTONS (desktop) ---------- */
  .float-actions{position:fixed; right:26px; bottom:26px; display:flex; flex-direction:column; gap:14px; z-index:60;}
  .fab{width:56px;height:56px; border-radius:50%; display:flex;align-items:center;justify-content:center; text-decoration:none; position:relative; transition:transform .15s ease; border:none; cursor:pointer;}
  .fab:hover{transform:translateY(-2px) scale(1.05);}
  .fab.call{background:linear-gradient(135deg, var(--sun1), var(--sun3)); color:#2A0F18; box-shadow:0 10px 24px rgba(212,175,55,0.4);}
  .fab.wa{background:var(--space); border:1.5px solid var(--mint); color:var(--mint); box-shadow:0 10px 24px rgba(203,178,106,0.2);}
  .fab.chat{background:linear-gradient(135deg, var(--nebula-purple), var(--sun2)); color:#2A0F18; box-shadow:0 10px 24px rgba(212,175,55,0.3);}
  .fab svg{width:24px;height:24px;}
  .fab .ring{position:absolute; inset:-6px; border-radius:50%; border:1.5px solid currentColor; opacity:0; animation:ring 2.2s ease-out infinite;}
  @keyframes ring{0%{opacity:0.5; transform:scale(0.85);} 100%{opacity:0; transform:scale(1.4);}}

  /* ---------- CHAT WIDGET ---------- */
  .chat-panel{
    position:fixed;
    right:26px;
    bottom:98px;
    width:340px;
    max-height:min(560px, 70vh);
    background:linear-gradient(180deg, rgba(58,16,18,0.98), rgba(33,10,12,0.98));
    border:1px solid var(--card-border);
    border-radius:20px;
    box-shadow:0 30px 70px rgba(0,0,0,0.5);
    z-index:65;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    opacity:0;
    transform:translateY(16px) scale(0.98);
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .chat-panel.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
  .chat-panel-head{display:flex; align-items:center; gap:12px; padding:16px 16px; border-bottom:1px solid var(--card-border);}
  .chat-panel-avatar{width:36px;height:36px; border-radius:50%; background:linear-gradient(135deg, var(--sun1), var(--sun3)); color:#2A0F18; display:flex; align-items:center; justify-content:center; flex:none;}
  .chat-panel-avatar svg{width:20px;height:20px;}
  .chat-panel-title{display:flex; flex-direction:column; flex:1; min-width:0;}
  .chat-panel-title strong{font-size:14px; color:var(--ice);}
  .chat-panel-title span{font-size:11.5px; color:var(--muted);}
  .chat-panel-close{background:none; border:none; color:var(--muted); cursor:pointer; padding:4px; flex:none;}
  .chat-panel-close svg{width:18px;height:18px;}
  .chat-panel-close:hover{color:var(--ice);}
  .chat-panel-body{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; min-height:180px;}
  .chat-msg{max-width:85%; padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.5;}
  .chat-msg.bot{align-self:flex-start; background:rgba(219,208,194,0.08); color:var(--ice); border-bottom-left-radius:4px;}
  .chat-msg.user{align-self:flex-end; background:linear-gradient(135deg, var(--sun1), var(--sun2)); color:#2A0F18; font-weight:500; border-bottom-right-radius:4px;}
  .chat-msg a{color:var(--sun1); text-decoration:underline;}
  .chat-msg.user a{color:#2A0F18;}
  .chat-quick-replies{display:flex; gap:6px; flex-wrap:wrap; padding:0 16px 12px;}
  .chat-quick-replies button{
    font-family:'Poppins', sans-serif; font-size:11.5px; font-weight:600; color:var(--ice);
    background:rgba(219,208,194,0.06); border:1px solid var(--card-border); border-radius:999px;
    padding:6px 12px; cursor:pointer; transition:border-color .15s ease, color .15s ease;
  }
  .chat-quick-replies button:hover{border-color:var(--sun1); color:var(--sun1);}
  .chat-input-row{display:flex; gap:8px; padding:0 16px 16px;}
  .chat-input-row input{
    flex:1; background:rgba(255,255,255,0.04); border:1px solid var(--card-border); border-radius:999px;
    padding:10px 16px; color:var(--ice); font-family:'Poppins', sans-serif; font-size:13px;
  }
  .chat-input-row input::placeholder{color:var(--muted);}
  .chat-input-row button{
    width:38px;height:38px; border-radius:50%; flex:none; border:none; cursor:pointer;
    background:linear-gradient(135deg, var(--sun1), var(--sun3)); color:#2A0F18;
    display:flex; align-items:center; justify-content:center;
  }
  .chat-input-row button svg{width:16px;height:16px;}
  .chat-panel-foot{margin:0; padding:0 16px 14px; font-size:10.5px; color:var(--muted); text-align:center; line-height:1.4;}
  @media (max-width:480px){
    .chat-panel{right:12px; left:12px; width:auto; bottom:88px;}
  }

  @media (max-width:980px){
    .hero-grid{grid-template-columns:1fr; gap:56px;}
    .build-wrap{max-width:320px;}
    .services-grid{grid-template-columns:1fr;}
    .values{grid-template-columns:repeat(2,1fr);}
    nav.links{display:none;}
  }

  @media (max-width:640px){
    section{padding:64px 0;}
    .hero{padding:80px 0 64px;}
    .services-grid{grid-template-columns:1fr;}
    .values{grid-template-columns:1fr;}
    .contact-panel{padding:48px 24px;}
    .process-list{padding-left:60px;}
    .process-path{left:24px;}
    .process-tag{left:-60px; width:48px; height:48px; font-size:12px;}
    .float-actions{display:none;}
    .logo-img{height:52px;}
    .slogan{font-size:10.5px; letter-spacing:0.08em;}
    .slogan .dash{display:none;}
    .footer-inner{flex-direction:column; align-items:flex-start; gap:10px;}

    .mobile-bar{
      display:flex; position:fixed; bottom:0;left:0;right:0; z-index:70;
      background:rgba(58,16,18,0.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--card-border);
    }
    .mobile-bar a, .mobile-bar button{
      flex:1; display:flex;align-items:center;justify-content:center;gap:6px; padding:14px 0;
      font-family:'Poppins', sans-serif; font-weight:600; font-size:12.5px; text-decoration:none;
      border:none; cursor:pointer;
    }
    .mobile-bar a.call{background:linear-gradient(95deg, var(--sun1), var(--sun3)); color:#2A0F18;}
    .mobile-bar a.wa{background:rgba(203,178,106,0.1); color:var(--mint);}
    .mobile-bar button.chat{background:rgba(219,208,194,0.06); color:var(--ice);}
    .mobile-bar svg{width:17px;height:17px;}
    body{padding-bottom:58px;}
  }

  /* ---------- HIDDEN UNLOCK (hold logo 5s) ---------- */
  header.nav .logo, header.nav .logo-img{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;}
  .pnl-gate{position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; background:rgba(20,6,10,0.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); padding:20px;}
  .pnl-gate.open{display:flex;}
  .pnl-gate-box{width:100%; max-width:340px; background:var(--space-deep); border:1px solid var(--card-border); border-radius:20px; padding:28px 24px; box-shadow:0 30px 70px rgba(0,0,0,0.55);}
  .pnl-gate-box h3{font-family:'Poppins',sans-serif; font-size:15px; font-weight:600; margin:0 0 16px; color:var(--ice); letter-spacing:0.02em;}
  .pnl-gate-box input{width:100%; background:rgba(255,255,255,0.05); border:1px solid var(--card-border); border-radius:10px; padding:12px 14px; color:var(--ice); font-family:'Poppins',sans-serif; font-size:16px; letter-spacing:0.2em; outline:none;}
  .pnl-gate-box input:focus{border-color:var(--sun1);}
  .pnl-gate-err{min-height:18px; margin:8px 0 0; font-size:12.5px; color:#ff8d8d;}
  .pnl-gate-row{display:flex; gap:10px; margin-top:12px;}
  .pnl-gate-row .btn{flex:1; justify-content:center; padding:11px 0;}
  .pnl-overlay{position:fixed; inset:0; z-index:10001; background:#0A0E17;}
  .pnl-overlay iframe{width:100%; height:100%; border:0; display:block;}