
:root{
  --croc:#F2F702;
  --croc-soft:#fbff76;
  --ocean:#123A52;
  --ocean-dark:#082A3A;
  --ocean-light:#1C5672;
  --ocean-panel:#0D4660;
  --bg:#0A3145;
  --panel:#0D4058;
  --text:#F7FAFC;
  --muted:#D2E0E6;
  --line:#3A6D82;
  --gold:#f4b51f;
  --violet:#bd65ff;
  --cyan:#18c9ff;
  --orange:#ff9d16
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 18% 10%,rgba(28,86,114,.45),transparent 30%),
    linear-gradient(180deg,#123A52 0%,#0E3A51 48%,#0A3145 100%);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif
}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(1450px,calc(100% - 48px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(8,42,58,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}.header-inner{height:78px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:13px}.brand img{width:84px}.brand-title{font-size:22px;font-weight:950;line-height:1}.brand-title span{color:var(--croc)}.brand-sub{font-size:10px;letter-spacing:.42em;margin-top:6px}.nav{display:flex;gap:30px;margin-left:auto;align-items:center;font-size:13px;font-weight:850}.nav a:hover,.nav a.active{color:var(--croc)}.contact-btn{border:1px solid var(--croc);padding:11px 16px;border-radius:8px;color:var(--croc)!important}.menu-btn{display:none;margin-left:auto;background:none;border:0;color:white;font-size:26px}
.hero{position:relative;min-height:560px;overflow:hidden;border-bottom:1px solid rgba(242,247,2,.14)}.hero-bg{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(1,7,10,.98) 0%,rgba(1,7,10,.9) 27%,rgba(1,7,10,.5) 48%,rgba(1,7,10,.05) 76%),url("home-hero-beach-tech.jpg");background-size:cover;background-position:center}.hero-inner{position:relative;z-index:2;min-height:560px;display:flex;align-items:center}.hero-copy{width:min(650px,54%);padding:45px 0}.kicker{font-size:15px;letter-spacing:.18em}.kicker b{color:var(--croc);padding:0 8px}.hero h1{font-size:clamp(52px,5.7vw,88px);line-height:.92;letter-spacing:-.045em;margin:18px 0;font-weight:950}.accent{display:block;color:var(--croc)}.hero p{font-size:18px;line-height:1.55;max-width:500px;color:#e1e7e4}.hero-actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:8px;font-weight:900;font-size:13px;border:1px solid #66736f}.btn.primary{background:var(--croc);border-color:var(--croc);color:#020607}.btn.secondary{background:rgba(3,8,10,.58);color:#fff}.hero-chip{position:absolute;right:7%;top:52%;z-index:3;padding:13px 18px;border:1px solid rgba(242,247,2,.58);border-radius:10px;background:rgba(2,8,11,.56);font-size:13px;font-weight:800}.hero-chip strong{color:var(--croc)}
.feature-strip{margin-top:-18px;position:relative;z-index:5}.feature-panel{background:rgba(5,13,15,.96);border:1px solid rgba(242,247,2,.36);border-radius:12px;padding:18px 26px;display:grid;grid-template-columns:repeat(4,1fr)}.feature{display:flex;gap:15px;padding:0 22px;border-right:1px solid rgba(255,255,255,.12)}.feature:last-child{border:0}.icon-orb{width:54px;height:54px;min-width:54px;border-radius:50%;display:grid;place-items:center;color:var(--croc);border:1px solid rgba(242,247,2,.32);background:radial-gradient(circle,rgba(242,247,2,.18),transparent 70%)}.feature h3{font-size:13px;margin:2px 0 7px}.feature p{font-size:12px;line-height:1.45;color:#cbd4d1;margin:0}
.section{padding:38px 0}.section-title{text-align:center;margin-bottom:18px}.section-title small{display:block;color:var(--croc);font-weight:850;letter-spacing:.14em}.section-title h2{font-size:26px;margin:3px 0 0}.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.product-card{position:relative;min-height:235px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#071013}.product-card .preview{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.7}.product-card:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,8,10,.97),rgba(3,8,10,.78) 54%,rgba(3,8,10,.2))}.product-content{position:relative;z-index:2;padding:24px;max-width:63%}.product-content h3{margin:0 0 12px;font-size:15px}.product-content p{font-size:12px;line-height:1.55;color:#d0d7d4}.product-content a{display:inline-block;margin-top:18px;font-size:12px;font-weight:900}.targeter{border-color:rgba(244,181,31,.62)}.targeter h3,.targeter a{color:var(--gold)}.music{border-color:rgba(189,101,255,.56)}.music h3,.music a{color:var(--violet)}.tv{border-color:rgba(24,201,255,.56)}.tv h3,.tv a{color:var(--cyan)}.student{border-color:rgba(255,157,22,.56)}.student h3,.student a{color:var(--orange)}.beta-badge{position:absolute;z-index:4;right:0;top:0;background:var(--croc);color:#020607;padding:5px 11px;font-size:10px;font-weight:950}
.beta-panel{margin:10px 0 22px;border:1px solid rgba(242,247,2,.42);border-radius:10px;background:linear-gradient(90deg,#081b14,#071510);display:grid;grid-template-columns:1.4fr .75fr 1.25fr;gap:28px;align-items:center;padding:17px 26px}.beta-panel h3{font-size:22px;margin:2px 0}.beta-panel p{font-size:12px;color:#d0d7d4;margin:5px 0}.beta-action{text-align:center}.beta-action .btn{min-width:220px}.beta-benefits{display:grid;grid-template-columns:repeat(3,1fr)}.beta-benefit{text-align:center;padding:0 12px;border-left:1px solid rgba(255,255,255,.12)}.beta-benefit b{display:block;color:var(--croc);font-size:12px}.beta-benefit span{display:block;font-size:11px;color:#d1d7d5;margin-top:4px}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.info-card{background:#071114;border:1px solid #25353a;border-radius:12px;padding:22px}.info-card h3{color:var(--croc)}
.site-footer{border-top:1px solid rgba(242,247,2,.15);padding:24px 0 12px}.footer-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr 1.1fr 1fr;gap:32px}.site-footer h4{color:var(--croc);font-size:12px;margin:0 0 10px}.site-footer a,.site-footer p{font-size:12px;color:#d4dcda;line-height:1.6;margin:0}.socials{display:flex;gap:10px;margin-top:12px}.socials span{width:34px;height:34px;border:1px solid rgba(242,247,2,.45);border-radius:50%;display:grid;place-items:center;color:var(--croc)}.mascot{border:1px solid rgba(242,247,2,.25);border-radius:14px;padding:14px;text-align:center;color:var(--croc);font-size:11px;font-weight:900}.mascot img{width:120px;margin:auto}.copyright{border-top:1px solid rgba(255,255,255,.08);margin-top:18px;padding-top:12px;text-align:center;font-size:11px;color:#8c9995}.page-shell{min-height:70vh;padding:80px 0}.page-shell h1{font-size:56px}.page-shell p{color:#c8d1ce;line-height:1.7;max-width:850px}
@media(max-width:1100px){.products-grid{grid-template-columns:repeat(2,1fr)}.feature-panel{grid-template-columns:repeat(2,1fr);row-gap:20px}.feature:nth-child(2){border-right:0}.footer-grid{grid-template-columns:repeat(3,1fr)}.beta-panel{grid-template-columns:1fr}.hero-copy{width:62%}}
@media(max-width:760px){.container{width:min(100% - 28px,1450px)}.header-inner{height:68px}.brand img{width:64px}.brand-title{font-size:16px}.nav{display:none;position:absolute;left:14px;right:14px;top:68px;padding:18px;border-radius:12px;background:#061013;border:1px solid #27363a;flex-direction:column;align-items:stretch}.nav.open{display:flex}.menu-btn{display:block}.hero{min-height:610px}.hero-bg{background-position:68% center}.hero-inner{min-height:610px;align-items:flex-end}.hero-copy{width:100%;padding:210px 0 44px}.hero h1{font-size:52px}.hero-chip{display:none}.feature-panel{grid-template-columns:1fr}.feature{border-right:0;border-bottom:1px solid rgba(255,255,255,.1);padding:14px 0}.products-grid{grid-template-columns:1fr}.product-card{min-height:245px}.beta-benefits{grid-template-columns:1fr}.beta-benefit{border-left:0;border-top:1px solid rgba(255,255,255,.1);padding:12px}.footer-grid{grid-template-columns:1fr 1fr}.info-grid{grid-template-columns:1fr}.page-shell h1{font-size:42px}}
@media(max-width:500px){.footer-grid{grid-template-columns:1fr}.product-content{max-width:74%}}

/* v0.3.0 Ocean Identity */
.brand img{display:none!important}
.brand{gap:0!important}
.brand-title{font-size:24px!important;letter-spacing:.025em}
.brand-sub{letter-spacing:.38em;color:#dfeaf0}
.site-header{box-shadow:0 8px 28px rgba(4,28,40,.22)}
.hero{background:#0d4058}
.hero-bg{
  background-image:
    linear-gradient(90deg,rgba(8,42,58,.97) 0%,rgba(8,42,58,.89) 27%,rgba(8,42,58,.46) 50%,rgba(8,42,58,.08) 78%),
    url("home-hero-ocean-tech.jpg")!important;
  background-size:cover!important;
  background-position:center 48%!important
}
.hero-copy{background:linear-gradient(90deg,rgba(8,42,58,.24),transparent);border-radius:18px}
.hero p{color:#f2f8fb}
.hero-chip{display:none!important}
.feature-panel{
  background:linear-gradient(180deg,rgba(15,73,99,.97),rgba(10,55,76,.97))!important;
  border-color:rgba(242,247,2,.30)!important
}
.icon-orb{background:rgba(242,247,2,.05)!important}
.section{background:transparent}
.product-card{
  background:linear-gradient(180deg,#0d4660,#0a354a)!important;
  box-shadow:0 12px 30px rgba(4,29,41,.16)
}
.product-card:after{
  background:linear-gradient(90deg,rgba(7,33,47,.98) 0%,rgba(7,33,47,.82) 52%,rgba(7,33,47,.16) 100%)!important
}
.beta-panel{
  background:linear-gradient(90deg,#0b4b65,#0a3d55)!important;
  box-shadow:0 14px 34px rgba(4,30,43,.18)
}
.info-card{
  background:linear-gradient(180deg,#104a63,#0d4058)!important;
  border-color:#40758a!important
}
.site-footer{
  background:linear-gradient(180deg,#0a354a,#082a3a)!important;
  border-top:1px solid rgba(242,247,2,.18)!important
}
.mascot{display:none!important}
.footer-grid{grid-template-columns:1.2fr 1fr 1fr 1.1fr!important}
.contact-btn{background:rgba(242,247,2,.03)}
.socials span{background:rgba(255,255,255,.02)}
@media(max-width:1100px){.footer-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr!important}.brand-title{font-size:18px!important}}

/* v0.3.1 — compact approved hero */
.hero{min-height:500px!important}
.hero-inner{min-height:500px!important}
.hero-bg{
  background-size:cover!important;
  background-position:58% 48%!important
}
.hero-copy{padding:34px 0!important}
.hero h1{font-size:clamp(50px,5.15vw,78px)!important}
.feature-strip{margin-top:-14px!important}

@media (min-width:1200px){
  .hero-bg{
    background-size:118% auto!important;
    background-position:63% 50%!important
  }
}
@media(max-width:760px){
  .hero{min-height:560px!important}
  .hero-inner{min-height:560px!important}
  .hero-bg{background-size:cover!important;background-position:68% center!important}
  .hero-copy{padding:190px 0 36px!important}
}

/* v0.4.0 — Products / Beta / Footer refinement. Hero intentionally untouched. */
#products{padding-top:44px!important;padding-bottom:46px!important}
#products .section-title{margin-bottom:24px}
#products .section-title small{color:var(--croc);font-weight:900;letter-spacing:.16em}
#products .section-title h2{font-size:clamp(30px,3vw,44px);margin-top:5px}

.products-grid{gap:18px!important}
.product-card{
  position:relative;overflow:hidden;border-radius:18px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  min-height:330px!important;transition:.22s ease
}
.product-card:hover{transform:translateY(-5px);border-color:rgba(242,247,2,.35)!important}
.product-card .preview{height:168px!important;background-size:cover!important;background-position:center!important}
.product-card .product-content{padding:20px 20px 22px!important;position:relative;z-index:3}
.product-card h3{font-size:19px!important;line-height:1.08;margin-bottom:10px!important}
.product-card p{color:#d6e4ea!important;min-height:58px}
.product-card a{display:inline-block;margin-top:8px;font-weight:900;letter-spacing:.04em}
.product-card.targeter{border-top:3px solid var(--gold)!important}
.product-card.music{border-top:3px solid var(--violet)!important}
.product-card.tv{border-top:3px solid var(--cyan)!important}
.product-card.student{border-top:3px solid var(--orange)!important}
.product-card.targeter a{color:var(--gold)!important}
.product-card.music a{color:var(--violet)!important}
.product-card.tv a{color:var(--cyan)!important}
.product-card.student a{color:var(--orange)!important}
.beta-badge{background:var(--gold)!important;color:#082a3a!important;font-weight:950!important}

.beta-panel{
  border-radius:20px!important;border:1px solid rgba(242,247,2,.30)!important;
  padding:28px 30px!important;margin-bottom:48px!important
}
.beta-panel h3{font-size:30px!important;margin:4px 0 8px!important}
.beta-panel p{color:#d6e4ea!important}
.beta-benefits{border-top:1px solid rgba(255,255,255,.12);margin-top:22px;padding-top:18px!important}
.beta-benefit b{color:var(--croc)}
.beta-benefit span{color:#d6e4ea!important}

#about{padding-top:38px!important}
#about .info-card h3{color:var(--croc)}
#about .info-card{min-height:150px}

.site-footer{padding-top:36px!important}
.site-footer .brand-title{font-size:20px!important}
.site-footer h4{color:var(--croc)!important;letter-spacing:.08em}
.site-footer a{color:#dbe8ed!important}
.site-footer a:hover{color:var(--croc)!important}
.copyright{border-top:1px solid rgba(255,255,255,.1)!important;margin-top:26px!important;padding-top:18px!important}

@media(max-width:900px){
  .products-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:600px){
  .products-grid{grid-template-columns:1fr!important}
  .product-card{min-height:auto!important}
  .beta-panel{padding:22px 18px!important}
}

/* v0.4.1 — PRODUCTS ONLY. Hero/Beta/About/Footer unchanged */
.products-grid{
  align-items:stretch!important;
}
.product-card{
  min-height:0!important;
  height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
.product-card:after{display:none!important}
.product-card .preview{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:150px!important;
  flex:0 0 150px!important;
  opacity:1!important;
  background-size:cover!important;
  background-position:center!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}
.product-card .product-content{
  position:relative!important;
  z-index:2!important;
  padding:17px 20px 20px!important;
  background:linear-gradient(180deg,#0d4660,#0a354a)!important;
  flex:1!important;
}
.product-card h3{
  margin:0 0 8px!important;
  min-height:41px!important;
}
.product-card p{
  margin:0!important;
  min-height:66px!important;
  line-height:1.45!important;
}
.product-card a{
  margin-top:13px!important;
}
.beta-badge{
  top:10px!important;
  right:10px!important;
  z-index:5!important;
}
@media(max-width:900px){
  .product-card .preview{height:180px!important;flex-basis:180px!important}
}
@media(max-width:600px){
  .product-card .preview{height:205px!important;flex-basis:205px!important}
  .product-card h3,.product-card p{min-height:0!important}
}

/* v0.4.2 — final Products polish */
.product-card .product-content{
  padding:15px 20px 15px!important;
}
.product-card h3{
  min-height:38px!important;
  margin-bottom:6px!important;
}
.product-card p{
  min-height:54px!important;
  line-height:1.4!important;
}
.product-card a{
  margin-top:9px!important;
  margin-bottom:0!important;
}
