:root{
    --night:#10141f;
    --night-2:#171d2c;
    --card:#1c2333;
    --amber:#e3a13c;
    --amber-dim:#a97a2e;
    --cream:#f2ead9;
    --muted:#8892a6;
    --line:#2b3348;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--night);
    color:var(--cream);
    font-family:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  @font-face{
    font-family:'Archivo Black';
    src:local('Archivo Black');
  }
  h1,h2,h3,.display{
    font-family:'Archivo Black','Arial Black',sans-serif;
    letter-spacing:-0.01em;
    line-height:1.05;
    font-weight:400;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

  /* Signboard texture accent */
  .signboard{
    position:relative;
  }
  .signboard::after{
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(0deg, rgba(227,161,60,0.035) 0px, rgba(227,161,60,0.035) 1px, transparent 1px, transparent 3px);
    pointer-events:none;
  }

  /* Header */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(16,20,31,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .headbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 24px;
    gap:16px;
    flex-wrap:wrap;
  }
  .brand{
    font-family:'Archivo Black','Arial Black',sans-serif;
    font-size:20px;
    color:var(--cream);
  }
  .brand span{color:var(--amber);}
  .call-pill{
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:var(--amber);
    color:var(--night);
    padding:12px 20px;
    border-radius:999px;
    font-weight:700;
    font-size:15px;
    transition:transform .15s ease, background .15s ease;
  }
  .call-pill:hover{background:#f0b559;transform:translateY(-1px);}
  .call-pill svg{width:17px;height:17px;flex-shrink:0;}
  .head-actions{display:flex;align-items:center;gap:10px;width:100%;}
  .wa-pill{background:#25d366;color:#0b2515;}
  .wa-pill:hover{background:#2fe075;}
  @media (min-width:521px){
    .head-actions{width:auto;}
  }
  @media (max-width:520px){
    .headbar{padding:14px 20px;}
    .headbar .brand{font-size:17px;}
    .head-actions{gap:10px;}
    .head-actions .call-pill{
      flex:1 1 0;
      padding:13px 10px;
      font-size:14px;
    }
    .head-actions .call-pill span{white-space:nowrap;}
  }

  /* Hero */
  .hero{
    padding:96px 0 80px;
    border-bottom:1px solid var(--line);
    position:relative;
    overflow:hidden;
  }
  .hero-glow{
    position:absolute;
    top:-200px;right:-160px;
    width:520px;height:520px;
    background:radial-gradient(circle, rgba(227,161,60,0.16) 0%, transparent 70%);
    pointer-events:none;
  }
  .eyebrow-line{
    display:flex;align-items:center;gap:12px;
    color:var(--amber);
    font-size:14px;
    margin-bottom:28px;
  }
  .eyebrow-line .dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--amber);
    box-shadow:0 0 0 4px rgba(227,161,60,0.18);
  }
  .hero h1{
    font-size:clamp(38px, 6vw, 68px);
    max-width:820px;
    color:var(--cream);
  }
  .hero h1 em{
    font-style:normal;
    color:var(--amber);
  }
  .hero p.lede{
    margin-top:24px;
    font-size:19px;
    color:var(--muted);
    max-width:520px;
  }
  .hero-actions{
    margin-top:36px;
    display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  }
  .btn-primary{
    background:var(--amber);
    color:var(--night);
    padding:16px 30px;
    border-radius:6px;
    font-weight:700;
    font-size:16px;
    display:inline-flex;align-items:center;gap:10px;
  }
  .btn-primary:hover{background:#f0b559;}
  .btn-ghost{
    border:1px solid var(--line);
    color:var(--cream);
    padding:16px 26px;
    border-radius:6px;
    font-size:16px;
  }
  .btn-ghost:hover{border-color:var(--amber-dim);}
  .stat-row{
    margin-top:64px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    max-width:640px;
  }
  .stat-num{
    font-family:'Archivo Black',sans-serif;
    font-size:34px;
    color:var(--amber);
  }
  .stat-label{
    font-size:13px;color:var(--muted);margin-top:4px;
  }

  /* Section titles */
  .section{padding:80px 0;border-bottom:1px solid var(--line);}
  .section-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    gap:24px;margin-bottom:44px;flex-wrap:wrap;
  }
  .section-head h2{
    font-size:clamp(28px,4vw,42px);
    color:var(--cream);
    max-width:560px;
  }
  .section-head p{
    color:var(--muted);
    max-width:360px;
    font-size:15px;
  }

  /* How it works */
  .steps{
    display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  }
  .step-card{
    border:1px solid var(--line);
    background:var(--card);
    border-radius:8px;
    padding:28px;
  }
  .step-num{
    font-family:'Archivo Black',sans-serif;
    color:var(--amber-dim);
    font-size:14px;
    margin-bottom:14px;
  }
  .step-card h3{
    font-size:20px;color:var(--cream);margin-bottom:10px;
    font-family:'Work Sans',sans-serif;font-weight:700;
  }
  .step-card p{color:var(--muted);font-size:15px;}

  /* District directory */
  .search-box{
    display:flex;align-items:center;gap:10px;
    border:1px solid var(--line);
    background:var(--night-2);
    border-radius:6px;
    padding:12px 16px;
    margin-bottom:36px;
  }
  .search-box input{
    background:transparent;border:none;outline:none;
    color:var(--cream);font-size:15px;width:100%;
    font-family:inherit;
  }
  .search-box input::placeholder{color:var(--muted);}
  .search-box svg{width:18px;height:18px;color:var(--muted);flex-shrink:0;}

  .side-tabs{
    display:flex;gap:10px;margin-bottom:28px;
  }
  .side-tab{
    padding:8px 16px;border-radius:999px;
    border:1px solid var(--line);
    font-size:13px;color:var(--muted);
    cursor:pointer;
    background:transparent;
    font-family:inherit;
  }
  .side-tab.active{
    border-color:var(--amber);
    color:var(--amber);
    background:rgba(227,161,60,0.08);
  }

  .district-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }
  details.district{
    border:1px solid var(--line);
    background:var(--card);
    border-radius:8px;
    overflow:hidden;
  }
  details.district[open]{border-color:var(--amber-dim);}
  details.district summary{
    list-style:none;
    cursor:pointer;
    padding:18px 20px;
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;
  }
  details.district summary::-webkit-details-marker{display:none;}
  .d-name{
    font-weight:700;font-size:16px;color:var(--cream);
  }
  .d-side{
    font-size:11px;color:var(--muted);
    border:1px solid var(--line);
    padding:3px 8px;border-radius:999px;
    margin-left:10px;
  }
  .d-chevron{
    width:18px;height:18px;color:var(--amber);
    transition:transform .2s ease;
    flex-shrink:0;
  }
  details.district[open] .d-chevron{transform:rotate(180deg);}
  .mahalle-list{
    padding:0 20px 20px;
    display:flex;flex-wrap:wrap;gap:8px;
  }
  .mahalle-chip{
    font-size:13px;
    color:var(--muted);
    border:1px solid var(--line);
    padding:6px 12px;
    border-radius:6px;
  }
  .no-result{
    display:none;
    color:var(--muted);
    padding:40px 0;
    text-align:center;
  }

  /* FAQ */
  .faq-list{
    display:flex;flex-direction:column;gap:12px;
    max-width:760px;
  }
  details.faq-item{
    border:1px solid var(--line);
    background:var(--card);
    border-radius:8px;
    padding:4px 20px;
  }
  details.faq-item[open]{border-color:var(--amber-dim);}
  details.faq-item summary{
    list-style:none;cursor:pointer;
    padding:18px 0;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    font-weight:700;color:var(--cream);font-size:16px;
  }
  details.faq-item summary::-webkit-details-marker{display:none;}
  details.faq-item[open] .d-chevron{transform:rotate(180deg);}
  details.faq-item p{color:var(--muted);font-size:15px;padding:0 0 20px;}

  /* Products */
  .product-row{
    display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  }
  .product-chip{
    border:1px solid var(--line);
    background:var(--card);
    border-radius:8px;
    padding:20px;
    text-align:left;
  }
  .product-chip h3{
    font-size:16px;color:var(--cream);
    font-family:'Work Sans',sans-serif;font-weight:700;
    margin-bottom:6px;
  }
  .product-chip p{font-size:13px;color:var(--muted);}

  /* Contact / CTA */
  .cta-block{
    background:var(--night-2);
    border-radius:16px;
    padding:56px;
    display:flex;justify-content:space-between;align-items:center;
    gap:32px;
    flex-wrap:wrap;
    border:1px solid var(--line);
  }
  .cta-block h2{font-size:clamp(26px,4vw,38px);max-width:440px;color:var(--cream);}
  .cta-phone{
    font-family:'Archivo Black',sans-serif;
    font-size:clamp(30px,4vw,44px);
    color:var(--amber);
  }
  .cta-sub{color:var(--muted);font-size:14px;margin-top:8px;}

  footer{
    padding:48px 0 32px;
    color:var(--muted);
    font-size:13px;
  }
  .foot-row{
    display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;gap:12px;
  }
  .foot-note{max-width:560px;color:#5f687f;font-size:12px;line-height:1.6;margin-top:20px;}

  @media (max-width:860px){
    .district-grid{grid-template-columns:1fr;}
    .steps{grid-template-columns:1fr;}
    .product-row{grid-template-columns:repeat(2,1fr);}
    .stat-row{grid-template-columns:repeat(3,1fr);gap:14px;}
    .cta-block{padding:32px;flex-direction:column;align-items:flex-start;text-align:left;}
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{transition:none !important;}
  }