:root{
  --ink:#181c20; --ink-soft:#565f66; --ink-faint:#8a929a;
  --paper:#faf9f6; --paper-alt:#f1efe8; --card:#ffffff; --line:#e7e3d9;
  --blue:#577fb3; --blue-deep:#2f5578; --blue-tint:#e9f0f8;
  --green:#22a76e; --green-deep:#166a48; --green-tint:#e7f6ef;
  --orange:#edb443; --orange-deep:#8a6118; --orange-tint:#fbf1de;
  --red:#d2564c; --red-deep:#9c342b; --red-tint:#fbebe9;
  --ease-out:cubic-bezier(0.23,1,0.32,1);

  --nav-pad:14px 64px;
  --section-pad:96px 64px;
  --hero-grid:1.05fr 0.95fr;
  --hero-gap:64px;
  --h1-size:52px;
  --h2-size:36px;
  --p-size:18px;
  --stats-grid:repeat(4,1fr);
  --tech-grid:repeat(4,1fr);
  --about-grid:repeat(3,1fr);
  --contact-grid:1fr 1fr;
  --nav-links-display:flex;
  --cta-text-display:inline;
  --hero-img-h:400px;

  --blue-bright:#9fc1ea;
  --depth-2:0 10px 26px rgba(16,20,26,0.10), 0 2px 6px rgba(16,20,26,0.06);
  --depth-3:0 22px 54px rgba(16,20,26,0.16), 0 6px 16px rgba(16,20,26,0.08);
  --depth-4:0 40px 90px rgba(8,10,14,0.45), 0 14px 34px rgba(8,10,14,0.30);
  --tilt-max:1800px;
}

@media (max-width: 900px){
  :root{
    --nav-pad:12px 20px;
    --section-pad:56px 20px;
    --hero-grid:1fr;
    --hero-gap:32px;
    --h1-size:32px;
    --h2-size:26px;
    --p-size:16px;
    --stats-grid:repeat(2,1fr);
    --tech-grid:repeat(2,1fr);
    --about-grid:1fr;
    --contact-grid:1fr;
    --nav-links-display:none;
    --cta-text-display:none;
    --hero-img-h:220px;
  }
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;margin:0;letter-spacing:-0.01em;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.mono{font-family:'IBM Plex Mono',monospace;}
.container{max-width:1180px;margin:0 auto;}
.section{padding:var(--section-pad);}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;font-weight:500;}

.nav{position:sticky;top:0;z-index:40;background:rgba(250,249,246,0.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:var(--nav-pad);}
.nav-links{display:var(--nav-links-display);align-items:center;gap:36px;}
.navlink{position:relative;transition:color 160ms var(--ease-out);font-size:15px;font-weight:500;}
.navlink::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--blue-deep);transition:right 220ms var(--ease-out);}
.navlink:hover{color:var(--blue-deep);}
.navlink:hover::after{right:0;}
.cta-text{display:var(--cta-text-display);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:600;font-size:15px;padding:13px 26px;cursor:pointer;border:1.5px solid transparent;transition:transform 160ms var(--ease-out),box-shadow 200ms var(--ease-out),background 200ms var(--ease-out);}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--blue-deep);color:#fff;box-shadow:0 1px 2px rgba(24,28,32,0.08);}
.btn-primary:hover{background:#25445f;box-shadow:0 6px 18px rgba(47,85,120,0.28);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink-soft);background:var(--card);}
.btn-block{width:100%;}

.card{
  position:relative;clip-path:inset(0 round 18px);
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  --rx:0;--ry:0;--ty:0px;
  transform:perspective(900px) rotateX(calc(var(--ry) * 1deg)) rotateY(calc(var(--rx) * 1deg)) translateY(var(--ty)) translateZ(0);
  transform-style:preserve-3d;
  box-shadow:var(--depth-2);
  transition:transform 260ms var(--ease-out),box-shadow 260ms var(--ease-out),border-color 220ms var(--ease-out);
}
.card:hover{box-shadow:var(--depth-3);border-color:#d8d2c2;}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.5), transparent 62%);
  opacity:0;transition:opacity 240ms var(--ease-out);
}
.card:hover::before{opacity:1;}
.card .icon-badge{transform:translateZ(24px);transition:transform 260ms var(--ease-out);}
@media (hover:none){ .card::before{display:none;} }

.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;border:1px solid var(--line);background:#fff;transition:transform 180ms var(--ease-out);}
.chip:hover{transform:translateY(-2px);}

.icon-badge{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.icon-badge svg{width:22px;height:22px;}
.icon-badge.sm{width:40px;height:40px;border-radius:11px;}
.icon-badge.sm svg{width:20px;height:20px;}

.hero{
  position:relative;overflow:hidden;
  padding-top:76px;padding-bottom:64px;
  --ink:#f4f7f9;--ink-soft:#b6c1cb;--ink-faint:#8c98a3;
  --line:rgba(255,255,255,0.14);--card:rgba(255,255,255,0.065);--blue-tint:rgba(255,255,255,0.12);
  background:
    radial-gradient(1100px 640px at 12% -8%, rgba(87,127,179,0.38), transparent 60%),
    radial-gradient(820px 560px at 102% 6%, rgba(210,86,76,0.24), transparent 55%),
    radial-gradient(760px 520px at 92% 104%, rgba(34,167,110,0.22), transparent 55%),
    radial-gradient(680px 480px at -4% 100%, rgba(237,180,67,0.22), transparent 55%),
    linear-gradient(180deg, #0d1117 0%, #131a22 55%, #0f1319 100%);
}
.hero::before{
  content:"";position:absolute;inset:-10% -10%;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:44px 44px;
  transform:translate3d(0, calc(var(--hero-scroll, 0) * -50px), 0);
}
.hero .container{position:relative;z-index:1;}
.hero .card:hover{border-color:rgba(255,255,255,0.3);}
.hero-grid{display:grid;grid-template-columns:var(--hero-grid);gap:var(--hero-gap);align-items:center;perspective:var(--tilt-max);}
.hero h1{font-size:var(--h1-size);line-height:1.08;font-weight:700;}
.hero p.lead{font-size:var(--p-size);line-height:1.6;color:var(--ink-soft);margin-top:22px;max-width:520px;}
.hero-media{position:relative;transform-style:preserve-3d;transform:rotateX(calc(var(--hy,0) * -1deg)) rotateY(calc(var(--hx,0) * 1deg));transition:transform 420ms var(--ease-out);}
.hero-media .frame{border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px rgba(3,5,8,0.5);height:var(--hero-img-h);position:relative;transform:translateZ(0px);}
.hero-media .frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(155deg, rgba(255,255,255,0.16) 0%, transparent 26%);
}
.hero-panel{width:100%;height:100%;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(87,127,179,0.45), transparent 55%),
    radial-gradient(circle at 82% 14%, rgba(210,86,76,0.35), transparent 50%),
    radial-gradient(circle at 78% 88%, rgba(34,167,110,0.38), transparent 55%),
    radial-gradient(circle at 20% 88%, rgba(237,180,67,0.4), transparent 50%),
    linear-gradient(135deg, var(--blue-deep) 0%, #10151a 100%);
}
.hero-panel::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:36px 36px;
}
.hero-panel .mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42%;height:auto;filter:drop-shadow(0 18px 36px rgba(0,0,0,0.3));}
.logo-mark{flex-shrink:0;}
.float-card{position:absolute;padding:16px 20px;display:flex;align-items:center;gap:12px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--depth-4);}
.float-badge-left{left:-16px;bottom:-20px;transform:translateZ(46px);}
.float-badge-right{right:-12px;top:-16px;padding:12px 18px;transform:translateZ(74px);}
@media (max-width:900px){
  .float-card{position:static;margin-top:14px;display:inline-flex;transform:none;}
  .float-badge-right{display:none;}
  .hero-grid{perspective:none;}
  .hero-media{transform:none;}
}
@media (max-width:900px){ .hero-media .frame{transform:none;} }

/* Scroll reveal */
.reveal-card{opacity:0;transition:opacity 560ms var(--ease-out);}
.reveal-card.is-in{opacity:1;}
.reveal-up{opacity:0;transform:translateY(20px);transition:opacity 560ms var(--ease-out),transform 560ms var(--ease-out);}
.reveal-up.is-in{opacity:1;transform:translateY(0);}

.stats-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-alt);box-shadow:inset 0 14px 26px -18px rgba(16,20,26,0.28);}
.stats-grid{display:grid;grid-template-columns:var(--stats-grid);padding:var(--section-pad);padding-top:40px;padding-bottom:40px;}
.stat{text-align:center;border-right:1px solid var(--line);padding:6px;}
.stat:last-child{border-right:none;}
.stat .num{font-size:32px;font-weight:600;}
.stat .label{font-size:13px;color:var(--ink-soft);margin-top:4px;}
@media (max-width:900px){ .stat{border-right:1px solid var(--line);} .stat:nth-child(2n){border-right:none;} }

h2{font-size:var(--h2-size);}

.legend{display:flex;gap:22px;flex-wrap:wrap;margin:28px 0 34px;}
.legend-item{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-soft);}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;}

.tech-grid{display:grid;grid-template-columns:var(--tech-grid);gap:18px;}
.tech-card{padding:22px;}
.tech-card .icon-badge{margin-bottom:14px;}
.tech-card .name{font-weight:700;font-size:15px;}

.ingles-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:start;}
@media (max-width:900px){ .ingles-grid{grid-template-columns:1fr;gap:28px;} }
.level-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}

.about-grid{display:grid;grid-template-columns:var(--about-grid);gap:22px;}
.about-card{padding:28px;}
.about-card .icon-badge{margin-bottom:16px;}
.about-card .title{font-weight:700;font-size:16.5px;margin-bottom:8px;}
.about-card .desc{font-size:14.5px;color:var(--ink-soft);line-height:1.6;}

.contact-grid{display:grid;grid-template-columns:var(--contact-grid);gap:56px;align-items:start;}
.contact-links{display:flex;flex-direction:column;gap:16px;}
.contact-link{padding:16px 20px;display:flex;align-items:center;gap:16px;}
.contact-link .k{font-size:12.5px;color:var(--ink-soft);}
.contact-link .v{font-weight:600;font-size:15.5px;}
.contact-card{padding:28px;}

.footer{padding:36px var(--nav-pad,64px);border-top:1px solid var(--line);}
.footer-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:0 64px;}
@media (max-width:900px){ .footer-inner{padding:0 20px;flex-direction:column;text-align:center;} }
.footer-brand{display:flex;align-items:center;gap:10px;}
.footer-text{font-size:13.5px;color:var(--ink-soft);}

.fab{position:fixed;right:24px;bottom:24px;width:58px;height:58px;border-radius:50%;background:var(--green-deep);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(22,106,72,0.35);transition:transform 200ms var(--ease-out);z-index:50;}
@media (hover:hover) and (pointer:fine){ .fab:hover{transform:scale(1.06);} }

@media (prefers-reduced-motion: reduce){
  .card,.chip,.btn,.navlink,.navlink::after,.fab,
  .hero-media,.card::before,.card .icon-badge,
  .reveal-card,.reveal-up{transition:none;}
  .reveal-card,.reveal-up{opacity:1;transform:none;}
  .hero::before{transform:none;}
}