:root{
      /*
        LOGO SETTINGS:
        To change the Talaleka logo, replace the value below with your logo file path.
        Example: --logo-url: url("assets/talaleka-logo.png");
        If left blank, the page uses the built-in text/logo fallback.
      */
      --logo-url: none;
      --navy:#061f3d;
      --navy-2:#092b53;
      --navy-3:#0b3768;
      --orange:#e45800;
      --orange-2:#ff7a00;
      --cream:#fff8ef;
      --cream-2:#fbefe2;
      --sand:#f8eadb;
      --white:#ffffff;
      --ink:#10243f;
      --muted:#5f6d7b;
      --line:#ead9c8;
      --shadow:0 20px 55px rgba(6,31,61,.15);
      --radius:24px;
      --max:1180px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--cream);
      color:var(--ink);
      font-family:Inter,Aptos,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
      line-height:1.5;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none}
    button,input,select{font:inherit}
    .container{width:min(var(--max),calc(100% - 42px));margin:0 auto}
    .serif{font-family:Georgia,"Times New Roman",serif}
    h1,h2,h3,p{margin-top:0}
    h1{
      font-family:Georgia,"Times New Roman",serif;
      font-size:clamp(48px,7vw,92px);
      line-height:.92;
      letter-spacing:-.045em;
      margin-bottom:22px;
      color:#fff;
      font-weight:800;
    }
    h2{
      font-family:Georgia,"Times New Roman",serif;
      font-size:clamp(31px,3.8vw,48px);
      line-height:1.1;
      letter-spacing:-.025em;
      margin-bottom:14px;
      color:var(--navy);
      font-weight:800;
    }
    h3{
      font-size:clamp(22px,2.2vw,32px);
      line-height:1.15;
      letter-spacing:-.02em;
      margin-bottom:8px;
      color:var(--navy);
    }
    p{color:var(--muted);margin-bottom:14px}
    .orange{color:var(--orange-2)}
    .btn{
      border:0;
      border-radius:10px;
      min-height:50px;
      padding:14px 22px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      font-weight:800;
      cursor:pointer;
      transition:.18s ease;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn-primary{background:linear-gradient(180deg,var(--orange-2),var(--orange));color:#fff;box-shadow:0 14px 28px rgba(228,88,0,.22)}
    .btn-outline-light{background:rgba(5,21,42,.38);border:1px solid rgba(255,122,0,.85);color:#fff}
    .btn-outline-navy{background:#fff;border:1px solid rgba(6,31,61,.18);color:var(--navy)}
    .section{padding:66px 0}
    .section-tight{padding:48px 0}
    .center{text-align:center}
    .title-rule{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:16px;
      margin-bottom:30px;
    }
    .title-rule:before,.title-rule:after{
      content:"";
      width:55px;
      height:3px;
      border-radius:99px;
      background:var(--orange);
    }

    /* Pattern treatment */
    .masi{
      position:relative;
      overflow:hidden;
      isolation:isolate;
    }
    .masi:before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:0;
      opacity:.075;
      background-image:
        linear-gradient(45deg,transparent 47%,currentColor 48%,currentColor 52%,transparent 53%),
        linear-gradient(-45deg,transparent 47%,currentColor 48%,currentColor 52%,transparent 53%),
        radial-gradient(circle at 50% 50%,transparent 50%,currentColor 51%,currentColor 56%,transparent 57%);
      background-size:58px 58px,58px 58px,116px 116px;
      color:var(--orange);
    }
    .masi>*{position:relative;z-index:1}
    .navy-pattern:before{filter:invert(1);mix-blend-mode:screen;opacity:.09}
    .pattern-strip{
      height:20px;
      background:
        repeating-linear-gradient(90deg,var(--orange) 0 18px,transparent 18px 27px),
        linear-gradient(90deg,var(--orange),var(--orange-2));
      border-top:1px solid rgba(255,255,255,.12);
      border-bottom:1px solid rgba(255,255,255,.12);
    }


    /* Editable logo system */
    .logo-img{
      width:56px;
      height:56px;
      object-fit:contain;
      display:none;
      flex:0 0 auto;
      background:transparent;
    }
    .brand.use-image .logo-img,
    .footer-logo.use-image .logo-img{
      display:block;
    }
    .brand.use-image .brand-icon,
    .footer-logo.use-image .brand-icon{
      display:none;
    }
    .brand.use-image .brand-text,
    .footer-logo.use-image .footer-logo-text{
      display:block;
    }
    .brand.use-image,
    .footer-logo.use-image{
      display:flex;
      align-items:center;
      gap:14px;
    }

    /* Header */
    header{
      position:sticky;
      top:0;
      z-index:50;
      background:linear-gradient(180deg,#061c38,#082847);
      color:#fff;
      border-bottom:1px solid rgba(255,255,255,.12);
    }
    .nav{
      height:75px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      color:#fff;
      font-weight:900;
    }
    .brand-icon{
      width:44px;
      height:44px;
      display:grid;
      place-items:center;
      color:var(--orange-2);
      font-size:32px;
      line-height:1;
    }
    .brand-text strong{
      display:block;
      letter-spacing:.18em;
      font-size:22px;
      line-height:1;
    }
    .brand-text small{
      display:block;
      font-size:11px;
      letter-spacing:.06em;
      color:#fff;
      opacity:.85;
      margin-top:5px;
      text-align:left;
    }
    .menu{
      display:flex;
      align-items:center;
      gap:44px;
      font-weight:800;
    }
    .menu a{
      position:relative;
      padding:26px 0;
      color:#fff;
    }
    .menu a.active:after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:13px;
      height:3px;
      background:var(--orange-2);
      border-radius:99px;
    }
    .nav-actions{
      display:flex;
      align-items:center;
      gap:28px;
      font-weight:800;
    }
    .login{
      display:flex;
      align-items:center;
      gap:10px;
      color:#fff;
    }
    .hamburger{display:none;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:10px;padding:10px 12px}

    /* Hero */
    .hero{
      background:linear-gradient(105deg,#05182f 0%,#071f3d 50%,#082b50 100%);
      color:#fff;
      padding:70px 0 32px;
      position:relative;
    }
    .hero:after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-1px;
      height:70px;
      background:var(--cream);
      clip-path:ellipse(65% 78% at 50% 100%);
      z-index:2;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1fr .92fr;
      gap:44px;
      align-items:center;
      min-height:520px;
    }
    .hero p{
      color:#fff;
      font-size:24px;
      max-width:670px;
      line-height:1.35;
    }
    .hero-actions{
      display:grid;
      grid-template-columns:max-content max-content;
      gap:18px;
      margin-top:28px;
      align-items:center;
    }
    .hero-actions .wide{grid-column:1 / 2}
    .hero-visual{
      position:relative;
      min-height:520px;
      display:grid;
      place-items:center;
      overflow:visible;
    }
    .island-bg{
      position:absolute;
      inset:0;
      border-radius:0 0 0 100px;
      background:
        radial-gradient(circle at 82% 38%,rgba(255,220,150,.95) 0 9%,transparent 10%),
        radial-gradient(ellipse at 76% 76%,#082b50 0 16%,transparent 17%),
        radial-gradient(ellipse at 92% 80%,#103f69 0 22%,transparent 23%),
        linear-gradient(135deg,#aee3ff 0%,#77b7e8 42%,#ffd0a0 70%,#f48b42 100%);
      box-shadow:inset 0 0 160px rgba(6,31,61,.24);
    }
    .island-bg:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg,transparent 62%,rgba(6,31,61,.24) 63%,transparent 67%),
        radial-gradient(ellipse at 13% 86%,#194f67 0 21%,transparent 22%);
    }
    .palm{
      position:absolute;
      width:130px;
      height:250px;
      border-left:7px solid #31552f;
      border-radius:0 0 40px 40px;
      transform-origin:bottom center;
      z-index:1;
    }
    .palm:before,.palm:after{
      content:"";
      position:absolute;
      top:-20px;
      left:-70px;
      width:140px;
      height:70px;
      border-top:10px solid #214b2b;
      border-radius:100% 0 100% 0;
      transform:rotate(-20deg);
    }
    .palm:after{left:-10px;transform:rotate(18deg) scaleX(-1)}
    .palm.one{right:48px;top:60px;transform:rotate(9deg)}
    .palm.two{right:180px;top:30px;transform:rotate(-8deg) scale(.86)}
    .phone{
      position:relative;
      width:min(330px,72%);
      background:#0c1421;
      border-radius:44px;
      padding:14px;
      z-index:3;
      box-shadow:0 44px 70px rgba(0,0,0,.34);
      border:3px solid rgba(255,255,255,.55);
    }
    .phone-notch{
      position:absolute;
      top:18px;
      left:50%;
      transform:translateX(-50%);
      width:118px;
      height:27px;
      border-radius:0 0 16px 16px;
      background:#0c1421;
      z-index:4;
    }
    .screen{
      height:560px;
      border-radius:34px;
      overflow:hidden;
      background:
        linear-gradient(180deg,rgba(174,227,255,.80),rgba(255,255,255,.2)),
        linear-gradient(135deg,#bde9ff,#ffe0ba 78%);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:flex-start;
      padding:70px 24px 24px;
      text-align:center;
    }
    .screen-logo{
      color:var(--navy);
      font-weight:900;
      letter-spacing:.2em;
      font-size:24px;
      margin-top:8px;
    }
    .screen small{color:var(--navy);font-weight:700}
    .soon-seal{
      margin-top:38px;
      width:172px;
      height:172px;
      border-radius:50%;
      background:linear-gradient(135deg,var(--orange),var(--orange-2));
      color:#fff;
      display:grid;
      place-items:center;
      text-align:center;
      font-weight:900;
      font-size:34px;
      line-height:1;
      box-shadow:inset 0 0 0 11px rgba(255,255,255,.35),0 18px 34px rgba(228,88,0,.28);
    }

    /* Launching Soon */
    .launching{
      background:var(--cream);
      padding-top:36px;
    }
    .launch-grid{
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:18px;
    }
    .launch-card{
      background:#fff;
      border-radius:12px;
      padding:28px 16px 20px;
      text-align:center;
      border:1px solid var(--line);
      box-shadow:0 9px 22px rgba(6,31,61,.08);
    }
    .launch-card .icon{
      font-size:42px;
      color:var(--orange);
      margin-bottom:12px;
    }
    .launch-card h3{
      font-size:17px;
      line-height:1.2;
      margin-bottom:6px;
    }
    .launch-card span{
      font-weight:800;
      color:var(--orange);
      font-size:13px;
    }

    /* Split merchants/talai */
    .split{
      background:linear-gradient(105deg,#061a34,#082b50);
      color:#fff;
      padding:55px 0;
    }
    .split.navy-pattern:before{opacity:.10}
    .split-grid{
      display:grid;
      grid-template-columns:1fr 1px 1fr;
      gap:36px;
      align-items:start;
    }
    .v-divider{
      width:1px;
      min-height:260px;
      background:linear-gradient(180deg,transparent,var(--orange),transparent);
      position:relative;
    }
    .v-divider:before{
      content:"◈";
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      color:var(--orange-2);
      font-size:34px;
    }
    .split-card{
      display:grid;
      grid-template-columns:96px 1fr;
      gap:24px;
      align-items:start;
    }
    .large-icon{
      width:96px;
      height:96px;
      border-radius:50%;
      border:2px solid rgba(255,255,255,.7);
      display:grid;
      place-items:center;
      font-size:44px;
      color:#fff;
    }
    .split h2,.split h3{color:#fff}
    .split h2{font-size:42px}
    .split p{color:#fff}
    .check-list{
      list-style:none;
      padding:0;
      margin:14px 0 22px;
      display:grid;
      gap:9px;
      color:#fff;
    }
    .check-list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
    }
    .check-list li:before{
      content:"✓";
      color:var(--orange-2);
      font-weight:900;
    }

    /* How it works */
    .how{
      background:var(--cream);
    }
    .steps{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:28px;
      position:relative;
    }
    .step{
      text-align:center;
      position:relative;
    }
    .step:before{
      content:"";
      position:absolute;
      top:42px;
      left:calc(50% + 52px);
      width:calc(100% - 76px);
      border-top:2px dashed rgba(228,88,0,.55);
    }
    .step:last-child:before{display:none}
    .step-icon{
      width:84px;
      height:84px;
      border-radius:50%;
      margin:0 auto 18px;
      display:grid;
      place-items:center;
      background:#fff;
      border:1px solid var(--line);
      color:var(--navy);
      font-size:36px;
      box-shadow:0 8px 18px rgba(6,31,61,.07);
    }
    .step-number{
      position:absolute;
      top:68px;
      left:calc(50% - 56px);
      width:27px;
      height:27px;
      border-radius:50%;
      background:var(--orange);
      color:#fff;
      font-weight:900;
      display:grid;
      place-items:center;
      font-size:13px;
    }
    .step h3{font-size:17px;margin-bottom:6px}
    .step p{font-size:13px;max-width:160px;margin:0 auto;color:var(--muted)}

    /* Why join */
    .why{
      background:linear-gradient(105deg,#061a34,#082b50);
      color:#fff;
      padding:56px 0;
    }
    .why.navy-pattern:before{opacity:.10}
    .why h2{color:#fff}
    .why-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:30px;
    }
    .why-card{
      text-align:left;
    }
    .why-icon{
      width:76px;
      height:76px;
      border-radius:50%;
      border:1px solid rgba(228,88,0,.75);
      display:grid;
      place-items:center;
      color:var(--orange-2);
      font-size:34px;
      margin-bottom:15px;
    }
    .why-card h3{
      color:#fff;
      font-size:20px;
      margin-bottom:6px;
    }
    .why-card p{
      color:rgba(255,255,255,.80);
      font-size:14px;
    }

    /* Waitlist */
    .waitlist{
      background:var(--cream);
      padding:48px 0;
    }
    .wait-form{
      background:#fff;
      border:1px solid var(--line);
      border-radius:9px;
      padding:12px;
      display:grid;
      grid-template-columns:1fr 1fr 1fr 1fr auto;
      gap:10px;
      box-shadow:0 14px 28px rgba(6,31,61,.07);
    }
    .field{
      height:44px;
      border:1px solid var(--line);
      border-radius:4px;
      display:flex;
      align-items:center;
      gap:8px;
      padding:0 12px;
      color:var(--muted);
      background:#fff;
    }
    .field input,.field select{
      border:0;
      outline:0;
      width:100%;
      color:var(--ink);
      background:transparent;
      min-width:0;
    }
    .privacy{
      text-align:center;
      margin-top:12px;
      color:var(--muted);
      font-size:13px;
    }

    /* WordPress waitlist connection: invisible plumbing, no visual form changes */
    .waitlist-honeypot{
      position:absolute !important;
      left:-10000px !important;
      width:1px !important;
      height:1px !important;
      overflow:hidden !important;
      opacity:0 !important;
      pointer-events:none !important;
    }
    .waitlist-status{
      margin:16px auto 0;
      max-width:680px;
      padding:12px 16px;
      border-radius:8px;
      text-align:center;
      font-weight:800;
    }
    .waitlist-success{
      background:rgba(255,255,255,.78);
      border:1px solid var(--line);
      color:var(--navy);
    }
    .waitlist-error{
      background:rgba(255,255,255,.78);
      border:1px solid var(--orange);
      color:var(--orange);
    }

    /* Testimonials */
    .together{
      background:var(--cream);
      padding:44px 0 54px;
    }
    .quote-wrap{
      display:grid;
      grid-template-columns:40px 1fr 1fr 1fr 40px;
      gap:18px;
      align-items:center;
    }
    .arrow{
      width:40px;
      height:40px;
      border-radius:50%;
      border:0;
      background:transparent;
      color:var(--orange);
      font-size:34px;
      display:grid;
      place-items:center;
    }
    .quote{
      background:rgba(255,255,255,.86);
      border:1px solid var(--line);
      border-radius:13px;
      padding:24px;
      min-height:150px;
      box-shadow:0 8px 22px rgba(6,31,61,.05);
      position:relative;
    }
    .quote:before,.quote:after{
      color:#d9c5ae;
      font-family:Georgia,serif;
      font-size:50px;
      position:absolute;
      line-height:1;
    }
    .quote:before{content:"“";left:16px;top:10px}
    .quote:after{content:"”";right:22px;bottom:2px}
    .quote p{
      font-size:15px;
      color:var(--ink);
      margin:16px 0;
    }
    .person{
      display:flex;
      align-items:center;
      gap:12px;
      margin-top:12px;
    }
    .avatar{
      width:48px;
      height:48px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg,#ffd1b3,var(--orange));
      color:#fff;
      font-weight:900;
    }

    /* FAQ */
    .faq{
      background:var(--cream);
      padding:38px 0 46px;
      border-top:1px solid rgba(234,217,200,.65);
    }
    .faq-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px 28px;
    }
    details{
      background:#fff;
      border:1px solid var(--line);
      border-radius:6px;
      padding:0 18px;
    }
    summary{
      list-style:none;
      display:flex;
      justify-content:space-between;
      align-items:center;
      font-weight:800;
      padding:17px 0;
      color:var(--navy);
      cursor:pointer;
    }
    summary::-webkit-details-marker{display:none}
    summary:after{content:"⌄";color:var(--navy)}
    details[open] summary:after{content:"⌃"}
    details p{
      padding-bottom:18px;
      margin:0;
      font-size:14px;
    }

    /* Final CTA/Footer */
    .final{
      background:linear-gradient(105deg,#061a34,#082b50);
      color:#fff;
    }
    .final.navy-pattern:before{opacity:.10}
    .miss{
      display:grid;
      grid-template-columns:96px 1fr auto;
      gap:24px;
      align-items:center;
      padding:48px 0;
      border-bottom:1px solid rgba(255,255,255,.12);
    }
    .paper{
      width:92px;
      height:92px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(255,255,255,.13);
      border:1px solid rgba(255,255,255,.3);
      font-size:42px;
    }
    .miss h2{color:#fff;margin-bottom:8px}
    .miss p{color:rgba(255,255,255,.80);font-size:18px;margin:0}
    .footer-grid{
      display:grid;
      grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;
      gap:34px;
      padding:44px 0 28px;
    }
    .footer-logo{
      display:flex;
      align-items:center;
      gap:13px;
      margin-bottom:14px;
    }
    .footer-logo .brand-icon{width:42px;height:42px;font-size:30px}
    .footer-logo strong{font-size:21px;letter-spacing:.16em}
    .footer-logo small{display:block;color:#fff;opacity:.85;font-size:11px;text-align:left}
    .final p,.footer a,.footer li{color:rgba(255,255,255,.78)}
    .footer h4{
      color:#fff;
      font-size:16px;
      margin-bottom:14px;
      font-family:Inter,Aptos,"Segoe UI",sans-serif;
    }
    .footer ul{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:8px;
      font-size:14px;
    }
    .socials{
      display:flex;
      gap:12px;
      margin-top:18px;
    }
    .socials a{
      width:34px;
      height:34px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:rgba(255,255,255,.13);
      color:#fff;
    }
    .bottom{
      border-top:1px solid rgba(255,255,255,.12);
      display:flex;
      justify-content:space-between;
      gap:18px;
      padding:18px 0;
      color:rgba(255,255,255,.75);
      font-size:14px;
    }

    @media(max-width:1050px){
      .launch-grid{grid-template-columns:repeat(3,1fr)}
      .steps{grid-template-columns:repeat(2,1fr)}
      .step:before{display:none}
      .why-grid{grid-template-columns:repeat(2,1fr)}
      .wait-form{grid-template-columns:1fr 1fr}
      .wait-form .btn{grid-column:1/-1}
      .quote-wrap{grid-template-columns:1fr}
      .arrow{display:none}
      .footer-grid{grid-template-columns:repeat(2,1fr)}
      .hero-grid{grid-template-columns:1fr}
      .hero-visual{min-height:480px}
      .menu,.nav-actions{display:none}
      .hamburger{display:block}
    }
    @media(max-width:720px){
      h1{font-size:46px}
      .hero-actions{grid-template-columns:1fr}
      .hero-actions .wide{grid-column:1}
      .btn{width:100%}
      .launch-grid,.split-grid,.why-grid,.faq-grid,.footer-grid{grid-template-columns:1fr}
      .v-divider{height:1px;min-height:1px;width:100%}
      .split-card{grid-template-columns:1fr;text-align:center}
      .large-icon{margin:0 auto}
      .wait-form{grid-template-columns:1fr}
      .steps{grid-template-columns:1fr}
      .miss{grid-template-columns:1fr;text-align:center}
      .paper{margin:0 auto}
      .bottom{flex-direction:column}
      .phone{width:min(300px,90%)}
      .screen{height:490px}
    }


/* External icon asset sizing */
.launch-card .icon img{
  width:48px;
  height:48px;
  object-fit:contain;
  margin:0 auto;
}
.large-icon img{
  width:54px;
  height:54px;
  object-fit:contain;
}
.large-icon.light{
  background:#fff;
  border-color:#fff;
}
.step-icon img{
  width:40px;
  height:40px;
  object-fit:contain;
}
.why-icon img{
  width:38px;
  height:38px;
  object-fit:contain;
}
.paper img{
  width:46px;
  height:46px;
  object-fit:contain;
}
.privacy.error{
  color:var(--orange);
  font-weight:800;
}

/* Functional mobile menu */
.mobile-menu{
  display:grid;
  gap:0;
  padding:0 0 18px;
  background:linear-gradient(180deg,#061c38,#082847);
}
.mobile-menu[hidden]{
  display:none !important;
}
.mobile-menu a{
  color:#fff;
  font-weight:800;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.mobile-menu.is-open{
  display:grid !important;
}
.hamburger{
  cursor:pointer;
  min-width:46px;
}
@media(min-width:1051px){
  .mobile-menu{display:none !important}
}