/* tadda.io
   Direction: Tadda's own world. Lavender ground, ink type, one violet, gold for the magic, WhatsApp green for "a lead arrived".
   One bold moment: the hero, where the owner's sentence turns into a campaign. Everything else stays quiet.
   Single light theme by choice (the brand's lavender); colors are set explicitly. */
:root{
  --ground:#F4F0FC; --paper:#FFFFFF; --ink:#1B1433; --muted:#5A5277; --line:#E3DCF3;
  --violet:#6A3FE0; --violet-ink:#4421B8; --soft:#ECE5FD; --deep:#24124F; --gold:#E8A93A; --green:#1FA463;
  --cta:linear-gradient(100deg,#5530D2 0%,#6A3FE0 45%,#9670FF 100%);
  --f:"Heebo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--violet-ink)}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:8px}
.wrap{width:min(100%,1160px);margin:0 auto;padding-inline:max(22px,env(safe-area-inset-left,0px)) max(22px,env(safe-area-inset-right,0px))}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;padding-block:22px;position:relative;z-index:2}
.logo{display:inline-flex;align-items:center;gap:3px;font-weight:900;font-size:30px;letter-spacing:-.045em;color:var(--ink);text-decoration:none;direction:ltr}
.logo svg{width:28px;height:28px}
.nav{display:flex;align-items:center;gap:22px;font-size:15.5px;font-weight:600}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--ink)}
.nav .lang{border:1.5px solid var(--line);border-radius:999px;padding:5px 14px;color:var(--ink);background:var(--paper)}

/* hero */
.hero{position:relative;padding-block:40px 96px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
html,body{overflow-x:clip}
.aura{position:absolute;inset:-160px 0 auto 0;height:900px;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 45% at 78% 35%,#D9C8FF 0%,transparent 70%),radial-gradient(30% 30% at 92% 70%,#FCE3B8 0%,transparent 70%),radial-gradient(35% 40% at 10% 10%,#E9DDFC 0%,transparent 70%)}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--violet-ink);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.kicker i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(31,164,99,.18)}
h1{margin:22px 0 0;font-size:clamp(46px,7.2vw,92px);line-height:.98;font-weight:900;letter-spacing:-.05em;text-wrap:balance}
h1 q{quotes:"\201C" "\201D"}
h1 q::before,h1 q::after{color:var(--gold)}
[dir="rtl"] h1 q{quotes:"\201D" "\201C"}
.lede{margin:26px 0 0;font-size:clamp(19px,1.8vw,22px);color:var(--muted);max-width:40ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:10px;height:58px;padding:0 28px;border-radius:999px;font-weight:700;font-size:17.5px;text-decoration:none;transition:transform .15s,box-shadow .2s}
.btn.main{background:var(--cta);color:#fff;box-shadow:0 18px 34px -16px rgba(106,63,224,.75)}
.btn.main:hover{transform:translateY(-1px);box-shadow:0 22px 40px -16px rgba(106,63,224,.85)}
.btn.ghost{color:var(--ink);background:var(--paper);border:1.5px solid var(--line)}
.btn svg{width:20px;height:20px}
[dir="rtl"] .btn svg.dir{transform:scaleX(-1)}

/* the magic: one sentence becomes a campaign (loops; static final state under reduced motion) */
.stage{position:relative;height:520px}
.shot{position:absolute;background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 60px -34px rgba(48,24,130,.45)}
.chat{inset:0 8% auto 0;padding:18px;display:grid;gap:12px;inset-inline-start:0;inset-inline-end:10%}
.chat .me{justify-self:end;background:var(--cta);color:#fff;font-weight:700;padding:11px 18px;border-radius:22px 22px 6px 22px;font-size:17px;white-space:nowrap;overflow:hidden}
[dir="rtl"] .chat .me{border-radius:22px 22px 22px 6px}
.chat .me span{display:inline-block}
.chat .plan{display:grid;gap:8px;background:var(--ground);border-radius:18px;padding:14px 16px}
.chat .plan b{font-size:15px;font-weight:800;display:flex;gap:6px;align-items:center}
.chat .plan b svg{width:18px;height:18px}
.row{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px;font-size:15.5px}
.row span:first-child{color:var(--muted);font-weight:600}
.row span:last-child{font-weight:700}
.ad{width:66%;top:238px;inset-inline-start:2%;padding:14px 16px;display:grid;gap:2px;font-size:14px}
.ad small{color:#5f6368;font-size:12.5px}
.ad b{color:#1a0dab;font-size:17px;font-weight:600;line-height:1.3}
.ad span{color:#4d5156}
.page{width:150px;height:250px;top:210px;inset-inline-end:0;border:6px solid var(--ink);border-radius:28px;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto}
.page .h{background:var(--cta);color:#fff;font-weight:800;font-size:13.5px;line-height:1.25;padding:16px 10px 18px}
.page .ln{display:grid;gap:7px;padding:10px;align-content:start}
.page .ln i{height:7px;border-radius:4px;background:var(--soft)} .page .ln i:nth-child(2){width:60%}
.page .wa{margin:10px;height:30px;border-radius:999px;background:#25D366;color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
.lead{width:62%;top:402px;inset-inline-start:8%;padding:12px 14px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;background:#E8F8E0;border-color:#CDEBC0}
.lead .ic{grid-row:span 2;width:40px;height:40px;border-radius:12px;background:#25D366;display:grid;place-items:center}
.lead .ic svg{width:22px;height:22px}
.lead b{font-size:15px;color:#103a12}
.lead span{font-size:14px;color:#2b5a2d}
.spark{position:absolute;width:16px;height:16px;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);background:var(--gold);opacity:0}

.page{transform:rotate(-2deg)}

/* sections */
.sec{padding-block:96px}
.eyebrow{font-size:16px;font-weight:700;color:var(--violet-ink);margin:0 0 12px}
h2{margin:0;font-size:clamp(34px,4.4vw,56px);line-height:1.04;font-weight:900;letter-spacing:-.04em;text-wrap:balance;max-width:18ch}
.sub{margin:18px 0 0;color:var(--muted);font-size:19px;max-width:52ch}

/* proof: the one strong number */
.proof{background:var(--deep);color:#F3EFFA;border-radius:36px;padding:72px clamp(28px,5vw,72px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;position:relative;overflow:hidden}
.proof::after{content:"";position:absolute;inset:auto -10% -60% 40%;height:120%;background:radial-gradient(closest-side,rgba(150,112,255,.45),transparent);pointer-events:none}
.num{font-size:clamp(48px,6.4vw,96px);font-weight:900;letter-spacing:-.05em;line-height:.95;display:flex;align-items:baseline;gap:.22em;white-space:nowrap;direction:ltr}
[dir="rtl"] .num{justify-content:flex-end}
.num s{color:#9C8FC4;text-decoration-thickness:6px;text-decoration-color:rgba(232,169,58,.8)}
.num .to{color:var(--gold);font-size:.55em}
.proof p{margin:0;font-size:19px;color:#CFC6EA;position:relative;z-index:1;max-width:36ch}
.proof p b{color:#fff}

/* promises */
.promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:56px}
.promises div{border-top:3px solid var(--ink);padding-top:20px}
.promises h3{margin:0 0 8px;font-size:23px;font-weight:800;letter-spacing:-.015em}
.promises p{margin:0;color:var(--muted);font-size:17px}

/* who */
.trades{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.trades span{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-weight:700;font-size:16.5px}

/* closing */
.close{text-align:center;padding-block:110px 120px;display:grid;justify-items:center;gap:8px}
.close h2{max-width:20ch}
.close .ctas{justify-content:center}

footer{border-top:1px solid var(--line);padding-block:28px 44px;font-size:15px;color:var(--muted);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer a{color:var(--muted)}

/* privacy */
.doc{padding-block:24px 80px;max-width:780px}
.doc h1{font-size:clamp(40px,6vw,64px)}
.doc .meta{color:var(--muted);font-size:15px;margin:10px 0 36px}
.doc h2{font-size:24px;letter-spacing:-.02em;margin:40px 0 10px;max-width:none}
.doc p,.doc li{max-width:68ch;font-size:17px}
.doc ul{padding-inline-start:22px}
.doc li{margin-bottom:8px}
.doc .box{background:var(--paper);border:1px solid var(--line);border-inline-start:4px solid var(--violet);border-radius:0 16px 16px 0;padding:16px 20px;margin:16px 0}
[dir="rtl"] .doc .box{border-radius:16px 0 0 16px}
.doc section+section{border-top:1px solid var(--line);margin-top:64px;padding-top:48px}

@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);padding-block:20px 64px;gap:36px}
  .stage{height:500px;max-width:520px}
  .proof{grid-template-columns:minmax(0,1fr);padding-block:56px}
  .promises{grid-template-columns:minmax(0,1fr);gap:28px}
  .sec{padding-block:72px}
  .nav .hide-s{display:none}
}
@media (max-width:520px){
  body{font-size:17px}
  .stage{height:520px}
  .ad{width:78%}
  .page{width:128px;height:220px;top:250px}
  .lead{width:80%;top:440px}
  .chat{inset-inline-end:0}
}