/* ============================================================
   15 · Playful Memphis — bright primary geometric pop
   Trend: Memphis revival — squiggles, dots, zigzags, bold
   primaries, thick black outlines, hard shadows. Loud & joyful.
   ============================================================ */
:root{
  --bg:#fdf3e7; --card:#ffffff; --ink:#1a1a1a; --dim:#4a4741;
  --red:#ff5a5f; --yellow:#ffcf3f; --blue:#3d6dff; --teal:#20c4b0; --pink:#ff5aa8; --purple:#8b5cf6;
  --border:3px solid var(--ink); --shadow:6px 6px 0 var(--ink); --shadow-sm:4px 4px 0 var(--ink);
  --disp:"Fredoka",ui-sans-serif,system-ui,sans-serif; --body:"DM Sans",ui-sans-serif,system-ui,sans-serif;
  --pad:clamp(18px,4vw,52px); --r:20px; --ease:cubic-bezier(.34,1.4,.5,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 var(--pad)}
.disp{font-family:var(--disp);font-weight:600}

/* decorative memphis shapes */
.shape{position:absolute;z-index:0;pointer-events:none}
.dot{width:16px;height:16px;border-radius:50%;background:var(--ink)}
.ring{width:52px;height:52px;border-radius:50%;border:8px solid var(--pink)}
.tri{width:0;height:0;border-left:26px solid transparent;border-right:26px solid transparent;border-bottom:44px solid var(--yellow)}
.sq{width:38px;height:38px;background:var(--blue);transform:rotate(18deg)}
.zig{width:70px;height:20px;background:repeating-linear-gradient(-45deg,var(--teal) 0 8px,transparent 8px 16px)}
.dots{width:80px;height:60px;background-image:radial-gradient(var(--purple) 3px,transparent 3px);background-size:16px 16px}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px var(--pad);background:var(--bg);border-bottom:var(--border)}
.nav .brand{font-family:var(--disp);font-weight:700;font-size:22px}
.nav .brand span{color:var(--red)}
.nav .links{display:flex;gap:clamp(6px,1.6vw,14px)}
.nav .links a{font-family:var(--disp);font-weight:500;font-size:15px;padding:6px 12px;border-radius:999px;transition:.15s var(--ease)}
.nav .links a:hover{background:var(--yellow);border:2px solid var(--ink);padding:4px 10px}
.lang{display:inline-flex;gap:0;border:var(--border);border-radius:999px;overflow:hidden}
.lang button{font-family:var(--disp);font-weight:600;font-size:13px;padding:6px 12px;border:0;background:var(--card);color:var(--ink);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--blue);color:#fff}
@media(max-width:680px){.nav .links a:not(.hide-sm){display:none}}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:70px var(--pad);overflow:hidden}
.hero .s1{top:12%;left:8%}.hero .s2{top:20%;right:10%}.hero .s3{bottom:24%;left:12%}
.hero .s4{bottom:16%;right:14%}.hero .s5{top:44%;left:4%}.hero .s6{top:38%;right:5%}
.hero .badge{display:inline-flex;align-items:center;gap:8px;align-self:center;font-family:var(--disp);font-weight:600;font-size:14px;padding:8px 18px;background:var(--yellow);border:var(--border);border-radius:999px;box-shadow:var(--shadow-sm);position:relative;z-index:1}
.hero h1{position:relative;z-index:1;font-family:var(--disp);font-weight:700;font-size:clamp(48px,12vw,150px);line-height:.94;margin-top:22px}
.hero h1 .red{color:var(--red)}.hero h1 .blue{color:var(--blue)}
.hero p.sub{position:relative;z-index:1;font-size:clamp(16px,2vw,21px);color:var(--dim);max-width:40ch;margin:20px auto 0}
.hero .cta{position:relative;z-index:1;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.btn{font-family:var(--disp);font-weight:600;font-size:16px;padding:13px 26px;border:var(--border);border-radius:999px;background:var(--card);color:var(--ink);cursor:pointer;box-shadow:var(--shadow-sm);transition:.14s var(--ease)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn.red{background:var(--red);color:#fff}.btn.blue{background:var(--blue);color:#fff}
.scrollcue{position:relative;z-index:1;font-family:var(--disp);font-weight:500;font-size:15px;color:var(--dim);margin-top:34px}

/* section */
.section{padding:clamp(52px,8vw,110px) 0;position:relative}
.section-head{text-align:center;margin-bottom:clamp(30px,4vw,52px)}
.section-head .k{display:inline-block;font-family:var(--disp);font-weight:600;font-size:14px;padding:5px 14px;border:2px solid var(--ink);border-radius:999px;background:var(--teal);color:#fff;transform:rotate(-2deg)}
.section-head h2{font-family:var(--disp);font-weight:700;font-size:clamp(32px,5.4vw,64px);line-height:1;margin-top:14px}

.grid{display:grid;gap:clamp(16px,2.2vw,26px)}
.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.g3{grid-template-columns:1fr 1fr}}@media(max-width:540px){.g3,.g2{grid-template-columns:1fr}}
.card{background:var(--card);border:var(--border);border-radius:var(--r);padding:clamp(20px,2.6vw,30px);box-shadow:var(--shadow);position:relative;z-index:1}
.card .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:24px;color:#fff;border:var(--border);margin-bottom:16px}
.card.red .ico{background:var(--red)}.card.blue .ico{background:var(--blue)}.card.yellow .ico{background:var(--yellow);color:var(--ink)}
.card.teal .ico{background:var(--teal)}.card.pink .ico{background:var(--pink)}.card.purple .ico{background:var(--purple)}
.card h3{font-family:var(--disp);font-weight:600;font-size:clamp(19px,2.2vw,24px);margin-bottom:8px}
.card p{color:var(--dim);font-size:15px}
.card .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.chip{font-family:var(--disp);font-weight:500;font-size:12.5px;padding:5px 11px;border:2px solid var(--ink);border-radius:999px;background:var(--bg)}
.stat{text-align:center}
.stat .n{font-family:var(--disp);font-weight:700;font-size:clamp(42px,6vw,68px);line-height:1}
.stat.red .n{color:var(--red)}.stat.blue .n{color:var(--blue)}.stat.pink .n{color:var(--pink)}.stat.teal .n{color:var(--teal)}
.stat .l{font-family:var(--disp);font-weight:500;color:var(--dim);margin-top:6px}

/* work tiles with color fills */
.tile{border:var(--border);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;position:relative;z-index:1}
.tile .top{aspect-ratio:16/10;display:grid;place-items:center;font-family:var(--disp);font-weight:600;font-size:20px;color:#fff;border-bottom:var(--border)}
.tile.red .top{background:var(--red)}.tile.blue .top{background:var(--blue)}.tile.yellow .top{background:var(--yellow);color:var(--ink)}.tile.pink .top{background:var(--pink)}
.tile .info{background:var(--card);padding:18px 20px}
.tile .info h3{font-family:var(--disp);font-weight:600;font-size:clamp(18px,2.2vw,23px)}
.tile .info p{color:var(--dim);font-size:14.5px;margin-top:4px}

/* contact */
.cta-band{background:var(--blue);color:#fff;border:var(--border);border-radius:28px;box-shadow:var(--shadow);padding:clamp(30px,5vw,60px);text-align:center;position:relative;z-index:1;overflow:hidden}
.cta-band h2{font-family:var(--disp);font-weight:700;font-size:clamp(32px,5.4vw,64px);line-height:1;margin-bottom:14px}
.cta-band p{opacity:.9;margin-bottom:24px}
.cta-band .mail{font-family:var(--disp);font-weight:600;font-size:clamp(17px,2.2vw,24px);background:var(--yellow);color:var(--ink);padding:12px 22px;border:var(--border);border-radius:999px;box-shadow:var(--shadow-sm);display:inline-block}
.cta-band .row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.cta-band .row a{font-family:var(--disp);font-weight:500;color:#fff}
.cta-band .row a:hover{text-decoration:underline;text-underline-offset:4px}
.foot{border-top:var(--border);padding:20px var(--pad);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-family:var(--disp);font-weight:500;font-size:14px;color:var(--dim)}
.tpl-note{text-align:center;font-size:13px;color:var(--dim);font-style:italic;margin-top:26px}

html.js [data-rise]{opacity:0;transform:translateY(24px) scale(.97);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js [data-rise].in{opacity:1;transform:none}
html.js [data-rise][data-d="1"]{transition-delay:.08s}html.js [data-rise][data-d="2"]{transition-delay:.16s}html.js [data-rise][data-d="3"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}html.js [data-rise]{opacity:1;transform:none;transition:none}}