/* Home page */

/* ---------- Hero ---------- */
.hero{position:relative; background:var(--teal); color:#fff; padding:96px 0 112px; overflow:hidden; isolation:isolate;}
.hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(600px 400px at 85% 20%, rgba(51,196,222,0.28), transparent 70%),
    radial-gradient(520px 380px at 70% 95%, rgba(143,224,0,0.18), transparent 70%),
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0/56px 56px;
  animation:glowShift 14s ease-in-out infinite alternate;}
@keyframes glowShift{from{background-position:0 0,0 0,0 0,0 0;} to{background-position:-40px 30px,30px -30px,0 0,0 0;}}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:72px; align-items:center;}
.hero h1{color:#fff; font-size:clamp(38px,5vw,64px); line-height:1.06;}
.reveal-words .w{display:inline-block; opacity:0; transform:translateY(0.6em); animation:wordIn .7s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes wordIn{to{opacity:1; transform:none;}}
.rise{opacity:0; transform:translateY(18px); animation:wordIn .8s cubic-bezier(.2,.7,.2,1) forwards;}
.hero .lede{margin-top:26px; max-width:48ch; font-size:19px; color:rgba(255,255,255,0.82);}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px;}
.hero-stats{display:flex; gap:44px; margin-top:52px; padding-top:28px; border-top:1px solid var(--line-on-teal);}
.hero-stats b{display:block; font-family:var(--font-display); font-size:38px; line-height:1; color:var(--lime);}
.hero-stats span{display:block; margin-top:8px; max-width:20ch; font-size:14px; line-height:1.4; color:rgba(255,255,255,0.72);}

.hero-visual-wrap{position:relative; opacity:0; transform:translateY(24px) scale(.97); animation:wordIn 1s .5s cubic-bezier(.2,.7,.2,1) forwards;}
.hero-visual-wrap::before{content:""; position:absolute; inset:-14px; border-radius:26px; background:linear-gradient(135deg,var(--lime),var(--cyan)); opacity:.55; filter:blur(30px); z-index:0;}
.hero-frame{position:relative; z-index:1; display:block; aspect-ratio:4/3; border-radius:18px; overflow:hidden; background:#fff; border:1px solid rgba(255,255,255,0.35); box-shadow:0 30px 70px rgba(0,0,0,0.45); animation:floaty 7s ease-in-out 1.6s infinite; transition:transform .4s;}
.hero-frame:hover{transform:scale(1.015);}
.hero-frame img{width:100%; height:100%; object-fit:cover;}
.hero-frame.is-logo{display:flex; align-items:center; justify-content:center; padding:48px;}
.hero-frame.is-logo img{width:auto; height:auto; max-height:100%; object-fit:contain;}
@keyframes floaty{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}
.hero-chip{position:absolute; left:14px; right:14px; bottom:14px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; border-radius:12px; background:rgba(8,44,51,0.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#fff; text-decoration:none;}
.hero-chip b{font-family:var(--font-display); font-size:15px; line-height:1.25; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hero-chip i{font-style:normal; font-weight:700; font-size:14px; color:var(--lime); white-space:nowrap;}

/* ---------- Section heading row ---------- */
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:48px; flex-wrap:wrap;}
.sec-head h2{font-size:clamp(28px,3.4vw,42px); max-width:20ch;}
.sec-head p{margin-top:14px; max-width:52ch; color:var(--muted);}
.sec-link{font-weight:700; color:var(--link); text-decoration:none; white-space:nowrap;}
.sec-link:hover{text-decoration:underline;}

/* ---------- Products ---------- */
.products{background:var(--paper);}
.p-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.p-card{display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .2s;}
.p-card:hover{border-color:var(--ink); box-shadow:0 14px 30px rgba(18,24,26,0.1);}
.p-media{position:relative; aspect-ratio:4/3; overflow:hidden; background:#E9EDE7; border-bottom:1px solid var(--line);}
.p-media img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.p-card:hover .p-media img{transform:scale(1.04);}
.p-media.is-empty{display:flex; align-items:center; justify-content:center;}
.p-media.is-empty svg{width:56px; height:56px; stroke:var(--teal); opacity:0.55;}
.p-icon{position:absolute; left:14px; bottom:14px; width:44px; height:44px; background:var(--white); border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.p-icon img{width:100%; height:100%; object-fit:cover;}
.p-icon svg{width:22px; height:22px; stroke:var(--teal);}
.p-body{padding:24px 26px 28px; display:flex; flex-direction:column; flex:1;}
.p-body h3{font-size:22px;}
.p-body p{margin-top:10px; color:var(--muted); font-size:15px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.p-more{margin-top:auto; padding-top:20px; font-weight:700; font-size:15px; color:var(--link);}
.p-card:hover .p-more{text-decoration:underline;}

/* ---------- Services ---------- */
.services{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.services-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:72px; align-items:start;}
.services-intro{position:sticky; top:110px;}
.services-intro h2{font-size:clamp(28px,3.4vw,42px);}
.services-intro p{margin-top:16px; color:var(--muted);}
.services-intro .btn{margin-top:28px;}
.service-list{border-top:1px solid var(--line);}
.service-row{padding:30px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:200px 1fr; gap:32px;}
.service-row h3{font-size:22px;}
.service-row p{color:var(--ink-soft);}
.service-row .tags{display:block; margin-top:10px; font-size:14px; font-weight:600; color:var(--link);}

/* ---------- About ---------- */
.about{background:var(--teal); color:#fff;}
.about-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:80px; align-items:center;}
.founder-photo{position:relative;}
.founder-photo img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top;}
.founder-photo::after{content:""; position:absolute; left:0; right:0; bottom:-10px; height:10px; background:var(--lime);}
.about h2{color:#fff; font-size:clamp(28px,3.4vw,42px);}
.about .statement{margin-top:22px; font-size:21px; line-height:1.55; color:rgba(255,255,255,0.9); max-width:44ch;}
.founder-id{margin-top:28px;}
.founder-id b{display:block; font-family:var(--font-display); font-size:20px; color:#fff;}
.founder-id span{font-size:15px; color:rgba(255,255,255,0.7);}
.points{list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.points li{padding-top:18px; border-top:4px solid var(--lime); font-size:15px; line-height:1.55; color:rgba(255,255,255,0.86);}

/* ---------- Clients ---------- */
.clients{background:var(--paper);}
.clients h2{font-size:clamp(24px,2.8vw,32px); margin-bottom:36px;}
.clients-strip{display:flex; flex-wrap:wrap; gap:28px 52px; align-items:center;}
.clients-strip img{height:54px; width:auto; max-width:180px; object-fit:contain; filter:grayscale(1); opacity:0.75; transition:filter .2s, opacity .2s;}
.clients-strip img:hover{filter:none; opacity:1;}

/* ---------- Contact ---------- */
.contact{background:var(--white); border-top:1px solid var(--line);}
.contact-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:72px;}
.contact h2{font-size:clamp(28px,3.4vw,42px);}
.contact .intro{margin:14px 0 32px; color:var(--muted); max-width:48ch;}
.contact-card{background:var(--paper); border:1px solid var(--line); padding:36px; align-self:start;}
.contact-card .item{padding:18px 0; border-bottom:1px solid var(--line);}
.contact-card .item:first-child{padding-top:0;}
.contact-card .item:last-child{border-bottom:none; padding-bottom:0;}
.contact-card b{display:block; font-family:var(--font-display); font-size:15px; margin-bottom:4px;}
.contact-card span, .contact-card a{color:var(--ink-soft); text-decoration:none;}
.contact-card a:hover{text-decoration:underline;}

@media (max-width: 1000px){
  .p-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 900px){
  .hero{padding:56px 0 72px;}
  .hero-grid, .services-grid, .about-grid, .contact-grid{grid-template-columns:1fr; gap:48px;}
  .hero-stats{gap:28px;}
  .services-intro{position:static;}
  .service-row{grid-template-columns:1fr; gap:10px;}
  .points{grid-template-columns:1fr; gap:22px;}
  .founder-photo{max-width:420px;}
  .contact-card{padding:26px;}
}
@media (max-width: 600px){
  .p-grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){.hero::before,.hero-frame{animation:none;}}

/* ---------- Team ---------- */
.team{background:var(--paper);}
.team-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; max-width:860px;}
.member{background:var(--white); border:1px solid var(--line); border-radius:6px; overflow:hidden; transition:transform .25s, box-shadow .25s;}
.member:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(11,58,66,0.14);}
.member-photo{position:relative; aspect-ratio:4/5; overflow:hidden; background:#E9EDE7;}
.member-photo img{width:100%; height:100%; object-fit:cover; object-position:center 18%; transition:transform .6s;}
.member:hover .member-photo img{transform:scale(1.04);}
.member-photo::after{content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:linear-gradient(90deg,var(--lime),var(--cyan));}
.member-info{padding:22px 24px 26px;}
.member-info b{display:block; font-family:var(--font-display); font-size:22px; line-height:1.2;}
.member-info span{display:block; margin-top:4px; color:var(--muted); font-size:15px;}
.member-info a{display:inline-block; margin-top:12px; color:var(--link); font-weight:700; font-size:15px; text-decoration:none; overflow-wrap:anywhere;}
.member-info a:hover{text-decoration:underline;}
@media (max-width:700px){.team-grid{grid-template-columns:1fr; max-width:420px;}}

.about-solo{grid-template-columns:1fr; gap:0;}
.about-solo .statement{max-width:60ch;}
.about-solo .points{margin-top:48px;}
.team-grid{max-width:940px;}