:root{
  --bg:#070707;--panel:#0d0d0e;--panel2:#131314;--text:#fffaf8;--muted:#aaa29f;
  --pink:#f4b5a5;--pink2:#ffd6cb;--line:rgba(244,181,165,.24);
  --white-line:rgba(255,255,255,.09);--max:1220px;--r:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.58}
body:before{content:"";position:fixed;z-index:-2;inset:0;background:radial-gradient(circle at 91% 9%,rgba(244,181,165,.115),transparent 28%),radial-gradient(circle at 8% 83%,rgba(244,181,165,.04),transparent 25%)}
a{text-decoration:none;color:inherit}img{display:block;max-width:100%}
.container{width:min(var(--max),calc(100% - 42px));margin:auto}
.eyebrow{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--pink);font-weight:850}
.nav{position:sticky;top:0;z-index:50;background:rgba(7,7,7,.87);backdrop-filter:blur(18px);border-bottom:1px solid var(--white-line)}
.nav-in{height:78px;display:flex;justify-content:space-between;align-items:center;gap:22px}
.brand img{width:183px}
.nav-links{display:flex;gap:22px;align-items:center;color:#d6ceca;font-size:13px}
.nav-links a:hover{color:var(--pink)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 17px;border-radius:999px;border:1px solid var(--pink);color:var(--pink);font-size:13px;font-weight:800;transition:.2s}
.btn:hover,.btn.fill{background:var(--pink);color:#080808}.btn.fill:hover{background:var(--pink2)}
h1,h2,h3{margin-top:0}
.hero{padding:82px 0 68px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:62px;align-items:center}
.hero h1{font-size:clamp(50px,6.8vw,86px);line-height:.97;letter-spacing:-.058em;margin:16px 0 23px}
.lead{font-size:18px;color:#c8c0bc;max-width:700px}.actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:29px}

/* Home hero: exactly three clean, balanced screens */
.hero-showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end;min-height:570px;position:relative}
.hero-phone{border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#161616;box-shadow:0 26px 60px rgba(0,0,0,.48)}
.hero-phone img{width:100%;height:auto}
.hero-phone:nth-child(1){transform:translateY(30px)}
.hero-phone:nth-child(2){transform:translateY(-8px)}
.hero-phone:nth-child(3){transform:translateY(22px)}
.hero-badge{position:absolute;right:16px;bottom:0;background:var(--pink);color:#111;border-radius:15px;padding:13px 16px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.09em}

.stats{border-top:1px solid var(--white-line);border-bottom:1px solid var(--white-line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:29px 23px;border-right:1px solid var(--white-line)}.stat:last-child{border-right:none}
.stat b{display:block;font-size:35px;line-height:1;color:var(--pink);letter-spacing:-.045em}
.stat span{display:block;color:var(--muted);font-size:11px;margin-top:7px}

.section{padding:96px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:45px;margin-bottom:38px}
.section-head h2{font-size:clamp(36px,5vw,56px);line-height:1;letter-spacing:-.045em;margin:9px 0 0;max-width:760px}
.section-head p{max-width:500px;color:var(--muted);margin:0}

/* Main portfolio */
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{border:1px solid var(--white-line);border-radius:var(--r);background:linear-gradient(180deg,#111112,#0a0a0b);overflow:hidden}
.span8{grid-column:span 8}.span4{grid-column:span 4}.span6{grid-column:span 6}
.card-copy{padding:28px 28px 30px}.card-copy h3{font-size:31px;letter-spacing:-.035em;line-height:1.04;margin:8px 0 12px;max-width:18ch}.card-copy p{color:var(--muted);margin:0;line-height:1.65}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}.tag{font-size:10px;padding:7px 9px;border-radius:999px;border:1px solid var(--line);background:rgba(244,181,165,.05);color:#ddd0cb}
.arrow{display:inline-flex;color:var(--pink);font-weight:800;font-size:12px;margin-top:19px}.arrow:after{content:"→";margin-left:8px}

/* Teamateur home card: three aligned screens occupying the full visual header */
.team-home-card{overflow:hidden}
.team-home-grid{height:420px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:18px 18px 0;background:radial-gradient(circle at 12% 18%,rgba(244,181,165,.11),transparent 24%),linear-gradient(180deg,#0e0e10,#09090a);position:relative;overflow:hidden;align-items:end}
.team-home-grid .screen{position:relative;border-radius:26px 26px 0 0;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#101011;box-shadow:0 18px 36px rgba(0,0,0,.34);height:100%;display:flex;align-items:flex-start;justify-content:center}
.team-home-grid .screen img{width:100%;height:100%;object-fit:contain;object-position:center top;display:block;background:#101011}
.team-home-grid .screen:nth-of-type(1),.team-home-grid .screen:nth-of-type(2),.team-home-grid .screen:nth-of-type(3){grid-column:auto;margin-top:0}
.team-home-grid .metric{position:absolute;left:20px;top:20px;z-index:4;background:rgba(8,8,8,.88);padding:16px 18px;border-radius:18px;border:1px solid var(--white-line);backdrop-filter:blur(12px);max-width:220px}
.metric b{display:block;font-size:48px;color:var(--pink);line-height:.9;margin-bottom:8px}.metric span{display:block;font-size:12px;color:#d7d0cb;text-transform:uppercase;letter-spacing:.14em;line-height:1.35}

.farma-vis{height:395px;background:#ed4137;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.farma-vis img{height:107%;width:auto;object-fit:contain;transform:translateY(6%)}

/* Orium / Myplanet: one full web capture + one social image, with black copy block */
.orium-card{background:#000}
.orium-vis{height:420px;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);gap:16px;padding:18px 18px 0;background:radial-gradient(circle at 88% 18%,rgba(244,181,165,.10),transparent 24%),linear-gradient(180deg,#0e0e10,#09090a);align-items:stretch}
.orium-main,.orium-small{overflow:hidden;border-radius:22px 22px 0 0;border:1px solid var(--white-line);background:#111;height:100%;display:flex;align-items:flex-start;justify-content:center}
.orium-main img{width:auto;height:100%;max-width:100%;object-fit:contain;object-position:center top;display:block;background:#111}
.orium-small img{width:auto;height:100%;max-width:100%;object-fit:contain;object-position:center top;display:block;background:#111}
.orium-side{display:grid;grid-template-rows:1fr;gap:0}
.orium-copy{background:#000}

.micro{height:370px;display:flex;align-items:flex-end;padding:30px;background:radial-gradient(circle at 88% 13%,rgba(244,181,165,.15),transparent 31%),#0b0b0c;position:relative}
.micro:after{content:"UX";position:absolute;right:28px;top:16px;font-size:90px;font-weight:900;letter-spacing:-.08em;color:#171718}.micro h3{font-size:30px;margin:8px 0 0;position:relative;z-index:2}

/* Web + design evidence */
.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.project{border:1px solid var(--white-line);border-radius:22px;overflow:hidden;background:#0d0d0e}
.project .img{height:335px;background:#111;overflow:hidden}
.project .img img{width:100%;height:100%;object-fit:cover}
.project .cap{padding:17px 20px}.project b{font-size:17px}.project small{display:block;color:#8b8581;margin-top:4px}
.history-note{margin-top:25px;padding:21px 24px;border-left:2px solid var(--pink);background:#0c0c0d;color:#c6bfba}

.design-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.design-item{border:1px solid var(--white-line);border-radius:19px;overflow:hidden;background:#0c0c0d}
.design-item .visual{height:235px;overflow:hidden;background:#151515}
.design-item img{width:100%;height:100%;object-fit:cover}
.design-item div.copy{padding:14px}.design-item b{font-size:13px}.design-item small{display:block;color:#817b77;font-size:10px;margin-top:3px}

/* Timeline */
.timeline{display:grid;grid-template-columns:.78fr 1.3fr;gap:66px}
.timeline-intro{position:sticky;top:110px;align-self:start}.timeline-intro h2{font-size:49px;line-height:1;letter-spacing:-.045em;margin:9px 0 18px}.timeline-intro p{color:var(--muted)}
.timeline-list{border-left:1px solid var(--line);padding-left:30px}
.job{position:relative;padding-bottom:38px}.job:before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--pink);left:-35px;top:8px}
.job time{font-size:10px;color:var(--pink);font-weight:850;letter-spacing:.1em;text-transform:uppercase}.job h3{font-size:23px;margin:5px 0 3px}.job .role{font-size:12px;color:#cec5c1}.job p{color:var(--muted);font-size:14px;margin:10px 0 0}

.about{display:grid;grid-template-columns:.75fr 1.25fr;gap:65px}.about-logo{border:1px solid var(--white-line);border-radius:var(--r);background:#020202;padding:38px}.about h2{font-size:49px;line-height:1;letter-spacing:-.045em;margin:9px 0 21px}.about p{color:#c4bcb8}
.skills{display:flex;gap:9px 18px;flex-wrap:wrap;margin-top:23px}.skills span{font-size:11px;color:#d9d0cc;border-bottom:1px solid var(--line);padding-bottom:4px}
.contact{text-align:center;padding:105px 0 120px;border-top:1px solid var(--white-line)}.contact h2{font-size:clamp(45px,7vw,78px);line-height:.96;letter-spacing:-.055em;max-width:900px;margin:10px auto 24px}.contact p{color:var(--muted);max-width:620px;margin:auto}
.footer{border-top:1px solid var(--white-line);padding:24px 0;color:#777;font-size:11px}.footer-in{display:flex;justify-content:space-between;gap:20px}

/* Floating WhatsApp */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:40;display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:999px;background:#25D366;color:#07130b;font-weight:800;font-size:13px;box-shadow:0 18px 42px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.22);text-decoration:none}
.wa-float:hover{transform:translateY(-2px);filter:brightness(1.02)}
.wa-float__icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.2);font-size:15px;line-height:1}

.reveal{opacity:0;transform:translateY(17px);transition:.55s ease}.reveal.visible{opacity:1;transform:none}

/* CASE STUDY */
.case-hero{padding:80px 0 58px;border-bottom:1px solid var(--white-line)}
.case-hero h1{font-size:clamp(57px,8.6vw,103px);line-height:.92;letter-spacing:-.06em;margin:14px 0 24px;max-width:1080px}
.case-hero p{font-size:18px;color:#c5bdb9;max-width:830px}
.case-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}.case-stat{border:1px solid var(--line);border-radius:14px;padding:10px 13px}.case-stat b{font-size:19px;color:var(--pink)}.case-stat span{font-size:9px;text-transform:uppercase;color:#999;margin-left:5px}
.case-layout{display:grid;grid-template-columns:245px 1fr;gap:62px}.aside{position:sticky;top:108px;align-self:start;color:var(--muted);font-size:12px}.aside b{display:block;color:#fff;margin-top:17px;margin-bottom:2px}
.case-block{padding-bottom:76px}.case-block h2{font-size:41px;line-height:1.03;letter-spacing:-.04em;margin:0 0 16px}.case-block>p{color:#c4bcb8;font-size:16px}
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:23px}.role-card{border:1px solid var(--white-line);border-radius:18px;background:#0d0d0e;padding:20px}.role-card h3{font-size:17px;color:var(--pink);margin:0 0 8px}.role-card p{font-size:12px;color:var(--muted);margin:0}

/* Current product: uniform cards */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.feature-card{border:1px solid var(--white-line);border-radius:21px;background:#0c0c0d;overflow:hidden}
.feature-phone{height:500px;padding:13px;background:#090909;display:flex;align-items:center;justify-content:center}
.feature-phone img{height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:17px}
.feature-caption{padding:15px 17px}.feature-caption b{font-size:14px}.feature-caption small{display:block;color:#8c8581;font-size:10px;margin-top:3px}

/* Evolution: two stages, each with a structured internal composition */
.stage-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.stage{border:1px solid var(--white-line);border-radius:23px;background:#0d0d0e;overflow:hidden}
.stage-head{padding:18px 20px;border-bottom:1px solid var(--white-line)}.stage-head b{font-size:16px}.stage-head p{font-size:12px;color:var(--muted);margin:5px 0 0}
.stage-visual{min-height:auto;padding:18px 18px 24px;display:grid;gap:12px;background:transparent;align-items:end}
.stage.mvp .stage-visual{background:transparent}
.mvp-visual{grid-template-columns:.62fr .62fr 1.4fr;align-items:center}
.mvp-visual .phone-mini{height:260px;display:flex;align-items:flex-end;justify-content:center}
.mvp-visual .phone-mini img{max-height:100%;width:auto;border-radius:18px}
.mvp-visual .web-mini{height:210px;display:flex;align-items:flex-end;justify-content:center}
.mvp-visual .web-mini img{width:100%;height:100%;object-fit:contain;border-radius:15px}
.current-visual{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;justify-items:center;gap:16px}
.current-visual img{width:auto;height:auto;max-width:100%;max-height:330px;object-fit:contain;border-radius:20px;border:1px solid rgba(255,255,255,.11)}
.callout{margin-top:19px;border-left:2px solid var(--pink);background:#0c0c0d;padding:16px 20px;color:#c7bfbb}

/* Tournament */
.tournament-grid{display:grid;gap:16px;margin-top:20px;align-items:start}
.tournament-grid--web{grid-template-columns:repeat(2,minmax(0,1fr))}
.tournament-grid--mobile{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px;gap:14px}
.tournament-card{border:1px solid var(--white-line);border-radius:22px;background:#0b0b0c;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:14px;min-height:0}
.tournament-card img{max-width:100%;max-height:100%;object-fit:contain;border-radius:18px;display:block}
.tournament-card--web{min-height:320px;padding:18px;background:linear-gradient(180deg,#111213,#0a0a0b)}
.tournament-card--web img{width:100%;height:auto;max-height:none}
.tournament-card--phone{min-height:340px;max-width:290px;justify-self:center;background:linear-gradient(180deg,#101112,#09090a)}
.tournament-card--phone img{height:auto;width:auto;max-width:100%;max-height:320px;object-fit:contain}

/* Monetization redesigned */
.money-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-top:23px}
.money-card{border:1px solid var(--white-line);border-radius:22px;background:#0d0d0e;overflow:hidden}
.money-head{padding:17px 19px;border-bottom:1px solid var(--white-line)}.money-head b{font-size:15px}.money-head small{display:block;color:var(--muted);font-size:10px;margin-top:4px}
.money-web{height:510px;padding:15px;display:flex;align-items:center;justify-content:center;background:#101011}
.money-web img{width:100%;height:100%;object-fit:contain;border-radius:14px}
.money-phones{height:510px;padding:15px;display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#090909}
.money-phones img{height:100%;width:100%;object-fit:contain;border-radius:18px}

/* Figma: smaller, supportive, no giant illegible canvas */
.arch-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:23px}
.arch-card{border:1px solid var(--white-line);border-radius:20px;background:#111;overflow:hidden}
.arch-img{height:390px;display:flex;align-items:center;justify-content:center;padding:18px;background:#171717}
.arch-img img{max-height:100%;max-width:100%;object-fit:contain}
.arch-copy{padding:15px 17px}.arch-copy b{font-size:14px}.arch-copy small{display:block;color:var(--muted);font-size:10px;margin-top:4px}

.results{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:23px}.result{border:1px solid var(--white-line);border-radius:17px;background:#0d0d0e;padding:20px}.result b{font-size:29px;color:var(--pink);display:block;line-height:1}.result span{font-size:10px;color:var(--muted);display:block;margin-top:8px}
.disclaimer{border-top:1px solid var(--white-line);padding-top:15px;margin-top:28px;font-size:10px;color:#7e7774}

@media(max-width:960px){
 .nav-links a:not(.btn){display:none}
 .hero-grid,.timeline,.about,.case-layout{grid-template-columns:1fr}
 .timeline-intro,.aside{position:static}
 .span8,.span4,.span6{grid-column:1/-1}
 .hero-showcase{max-width:700px;margin:auto}
 .design-grid{grid-template-columns:repeat(2,1fr)}
 .stage-grid,.money-grid{grid-template-columns:1fr}
 .results{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
 .container{width:min(var(--max),calc(100% - 26px))}
 .brand img{width:145px}.nav-in{height:70px}
 .hero{padding-top:64px}
 .hero-showcase{min-height:auto;gap:7px;margin-top:30px}
 .hero-phone{border-radius:17px}.hero-phone:nth-child(1),.hero-phone:nth-child(2),.hero-phone:nth-child(3){transform:none}
 .hero-badge{position:static;grid-column:1/-1;text-align:center;margin-top:8px}
 .stats-grid{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:none}.stat:nth-child(-n+2){border-bottom:1px solid var(--white-line)}
 .section{padding:73px 0}.section-head{display:block}.section-head p{margin-top:16px}
 .team-home-grid{height:300px;padding:10px 10px 0;gap:7px}.team-home-grid .screen{border-radius:13px 13px 0 0;margin-top:0 !important;grid-column:auto !important}
 .team-home-grid .metric{padding:10px 12px;max-width:170px}.metric b{font-size:30px}.metric span{font-size:9px}
 .orium-vis{height:310px;padding:10px 10px 0}
 .projects{grid-template-columns:1fr}.design-grid{grid-template-columns:1fr 1fr}
 .feature-grid{grid-template-columns:1fr}.feature-phone{height:560px}
 .stage-grid{grid-template-columns:1fr}.stage-visual{min-height:auto}
 .mvp-visual{grid-template-columns:1fr 1fr}.mvp-visual .phone-mini{height:210px}.mvp-visual .web-mini{grid-column:1/-1;height:180px}
 .current-visual{grid-template-columns:repeat(3,1fr);padding:10px}.current-visual img{height:auto;max-height:180px}
 .tournament-grid--web,.tournament-grid--mobile{grid-template-columns:1fr}
 .tournament-card{min-height:280px}
 .tournament-card--phone{min-height:360px}
 
 .wa-float{right:14px;bottom:14px;padding:12px 14px;font-size:12px}
 .money-phones{height:430px}.arch-grid{grid-template-columns:1fr}.arch-img{height:340px}
 .results{grid-template-columns:1fr 1fr}
 .role-grid{grid-template-columns:1fr}.case-block h2{font-size:34px}
 .about h2,.timeline-intro h2{font-size:39px}.footer-in{display:block}
}