/* MARTIS public site — "the waterline". Land (graphite + chrome) above, water (blue) below. */
:root{
  --pool:#031522;--pool2:#06263b;--lane:#0b6aa2;--lane2:#0f7fbf;--aqua:#35c8f5;--chrome:#e8eef4;--steel:#9fb0c1;
  --iron:#141d27;--chalk:#f3f6f9;--line:#d8e2eb;--water-top:#0a5d92;
  --display:"Big Shoulders Display","Hanken Grotesk",Impact,system-ui,sans-serif;--body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1180px;--r:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pool);color:var(--iron);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:#000;padding:10px 14px;border-radius:8px}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--aqua);outline-offset:3px;border-radius:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* language toggle */
html[data-lang="hr"] .l-en,html[data-lang="en"] .l-hr{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:12px;border:1px solid transparent;font:700 15px/1.1 var(--body);text-decoration:none;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn-lg{padding:16px 26px;font-size:16px;border-radius:14px}
.btn-solid{background:var(--lane);color:#fff}.btn-solid:hover{background:var(--lane2)}
.btn-aqua{background:var(--aqua);color:#032235;box-shadow:0 10px 28px -10px rgba(53,200,245,.8)}.btn-aqua:hover{background:#5ad5fa}
.btn-ghost{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.38);color:#fff}.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-chrome{background:linear-gradient(#f6f9fb,#c3cfdb);color:#0e1822}.btn-chrome:hover{background:linear-gradient(#fff,#d3dde7)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .25s,box-shadow .25s}
.nav.is-solid,body.is-inner .nav{background:rgba(3,21,34,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.07)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:20px}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.nav-brand img{width:86px;height:auto;border-radius:12px;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.nav-word{font:800 22px/1 var(--display);letter-spacing:.08em;display:flex;flex-direction:column}
.nav-word small{font:600 10px/1.4 var(--body);letter-spacing:.16em;color:var(--steel);text-transform:none;margin-top:3px}
.nav-links{display:flex;gap:6px;margin-left:auto}
.nav-links a{color:#d8e6f0;text-decoration:none;font-weight:600;font-size:15px;padding:10px 12px;border-radius:10px}
.nav-links a:hover{background:rgba(255,255,255,.08)}
.nav-tools{display:flex;align-items:center;gap:10px}
.lang{display:flex;border:1px solid rgba(255,255,255,.22);border-radius:10px;overflow:hidden}
.lang button{background:transparent;border:0;color:#cfe0ec;font:700 12px/1 var(--body);padding:9px 10px;cursor:pointer;letter-spacing:.05em}
html[data-lang="hr"] .lang [data-set-lang="hr"],html[data-lang="en"] .lang [data-set-lang="en"]{background:#fff;color:#04202f}
.nav-cta{padding:10px 16px;font-size:14px}
.burger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:transparent;position:relative;cursor:pointer}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,top .2s}
.burger span:first-child{top:16px}.burger span:last-child{top:24px}
.nav.open .burger span:first-child{top:20px;transform:rotate(45deg)}.nav.open .burger span:last-child{top:20px;transform:rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--pool);overflow:hidden}
.hero-land{position:relative;overflow:hidden;min-height:clamp(300px,40vh,440px);display:flex;align-items:flex-end;padding:120px 0 14px;background:radial-gradient(70% 90% at 82% 15%,#1f3040 0,#0f1a25 55%,#09111a 100%)}
.hero-land::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(100deg,rgba(255,255,255,.018) 0 2px,transparent 2px 7px);pointer-events:none}
.hero-land-in{position:relative}
.plate{position:absolute;right:-60px;top:-150px;width:min(62vw,560px);color:rgba(190,208,224,.1)}
.hero-line{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(52px,8.4vw,122px);line-height:.88;letter-spacing:-.005em;position:relative}
.hero-line.land{background:linear-gradient(180deg,#fff 0%,#cdd7e1 36%,#8696a8 50%,#e3eaf1 66%,#a5b3c2 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.hero-water{position:relative;background:linear-gradient(180deg,var(--water-top) 0%,#07406a 42%,#031f35 100%);padding:34px 0 72px;margin-top:0}
.waves{max-width:none;position:absolute;left:0;top:-52px;width:200%;height:54px;display:block;pointer-events:none;animation:drift 22s linear infinite}
.waves path{transform-origin:center}
.waves .w1{fill:var(--water-top)}.waves .w2{fill:rgba(53,200,245,.38)}.waves .w3{fill:rgba(53,200,245,.18)}
.waves .w2{animation:bob 7s ease-in-out infinite}.waves .w3{animation:bob 9s ease-in-out infinite reverse}
@keyframes drift{to{transform:translateX(-50%)}}
@keyframes bob{50%{transform:translateY(5px)}}
.hero-water-in{display:grid;grid-template-columns:max-content minmax(300px,1fr);gap:30px 48px;align-items:end}
.hero-line.water{white-space:nowrap;background:linear-gradient(180deg,#fff,#b9ecff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy p{margin:0 0 22px;font-size:19px;line-height:1.55;color:#d6ecf7;max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
@media (prefers-reduced-motion:no-preference){
  .hero-line{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}.hero-line.water{white-space:nowrap;animation-delay:.18s}
  .hero-copy{animation:rise .9s .34s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.waves,.waves path{animation:none!important}}

/* ---------- sections ---------- */
.sec{padding:clamp(64px,9vw,120px) 0}
.sec-light{background:#fff}
.sec-chalk{background:var(--chalk)}
.sec-pool{background:var(--pool);color:#d6e6f0}
.sec h2{font:800 clamp(38px,6vw,72px)/.95 var(--display);text-transform:uppercase;letter-spacing:.005em;margin:0 0 14px;color:var(--iron)}
.sec-pool h2{color:#fff}
.sec-head{max-width:760px;margin-bottom:clamp(30px,5vw,56px)}
.sec-head p{margin:0;font-size:19px;color:#4c5d6e}
.sec-pool .sec-head p{color:#a9c4d4}

/* services */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.svc{border-radius:26px;padding:clamp(26px,4vw,44px);display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}
.svc h3{font:800 clamp(44px,6vw,76px)/.9 var(--display);text-transform:uppercase;margin:0}
.svc p{margin:0;font-size:17.5px;max-width:44ch}
.svc ul{list-style:none;margin:4px 0 12px;padding:0;display:grid;gap:9px}
.svc li{padding-left:22px;position:relative;font-weight:600}
.svc li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:2px;transform:rotate(45deg)}
.svc .btn{align-self:flex-start;margin-top:auto}
.svc-land{background:linear-gradient(160deg,#1c2936,#0c141c);color:#d6e0ea}
.svc-land h3{background:linear-gradient(180deg,#fff,#aab8c7);-webkit-background-clip:text;background-clip:text;color:transparent}
.svc-land li::before{background:#b9c6d3}
.svc-water{background:linear-gradient(160deg,#1385c7,#06365a);color:#e6f7ff}
.svc-water h3{color:#fff}.svc-water li::before{background:var(--aqua)}
.svc-online{margin-top:18px;border:1px solid var(--line);border-radius:22px;padding:clamp(22px,3.5vw,34px);display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--chalk)}
.svc-online h3{font:800 34px/1 var(--display);text-transform:uppercase;margin:0 0 6px}
.svc-online p{margin:0;max-width:62ch;color:#445568}

/* app / anatomy */
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.app-copy p{font-size:19px;color:#a9c4d4;max-width:48ch}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}
.chip-btn{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.05);color:#e6f3fa;border-radius:99px;padding:10px 16px;font:700 14px/1 var(--body);cursor:pointer;transition:background .15s,color .15s}
.chip-btn:hover{background:rgba(255,255,255,.12)}
.chip-btn.is-on{background:var(--aqua);border-color:var(--aqua);color:#032235}
.app-points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.app-points li{padding-left:26px;position:relative;color:#d6e6f0;font-weight:600}
.app-points li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:8px;border-left:3px solid var(--aqua);border-bottom:3px solid var(--aqua);transform:rotate(-45deg)}
.app-demo .an-panel{max-width:520px;margin-left:auto}

/* steps (a real sequence → numbered) */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 22px 0 0;display:flex;flex-direction:column;gap:6px}
.steps li::before{content:counter(s);font:800 78px/1 var(--display);color:transparent;-webkit-text-stroke:2px var(--lane);margin-bottom:6px}
.steps li:not(:last-child)::after{content:"";position:absolute;top:38px;left:62px;right:8px;height:2px;background:linear-gradient(90deg,var(--lane),transparent)}
.steps b{font:800 32px/1.02 var(--display);text-transform:uppercase}
.steps span{color:#4c5d6e;font-size:16px}

/* packages */
.pk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.pk{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:2px}
.pk h3{font:800 32px/1 var(--display);text-transform:uppercase;margin:0 0 10px}
.pk-num{font:900 112px/.9 var(--display);color:var(--lane);letter-spacing:-.01em}
.pk-unit{color:#586a7b;font-weight:600;margin-bottom:16px}
.pk-price{font:700 22px/1.2 var(--body);margin-bottom:6px}
.pk-note{margin:0 0 6px;color:#586a7b;font-size:15px}
.pk .btn{margin-top:auto;align-self:flex-start}
.pk .pk-price+.btn,.pk .pk-note+.btn{margin-top:18px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.contact-info p{color:#a9c4d4;font-size:18px;max-width:44ch}
.mini{font:700 16px/1 var(--body);color:var(--aqua);margin:34px 0 10px}
.hours{border-collapse:collapse;width:100%;max-width:420px}
.hours th,.hours td{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.12);text-align:left;font-size:16px}
.hours th{font-weight:600;color:#cfe0ec}.hours td{text-align:right;color:#fff;font-variant-numeric:tabular-nums}
.hours tr.is-today th,.hours tr.is-today td{color:var(--aqua);font-weight:800}
.contact-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:8px;font-weight:600}
.contact-list a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.card-form{background:#fff;color:var(--iron);border-radius:26px;padding:clamp(22px,3.5vw,38px);display:grid;gap:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.fld{display:grid;gap:6px}.fld label{font-weight:700;font-size:14px;color:#334558}
.fld input,.fld select,.fld textarea{width:100%;font:500 16px/1.3 var(--body);padding:13px 14px;border:1.5px solid #cfdbe6;border-radius:12px;background:#fff;color:var(--iron)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--lane);box-shadow:0 0 0 4px rgba(11,106,162,.16)}
.fld textarea{resize:vertical;min-height:110px}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-note{margin:0;font-size:13px;color:#68798a}
.form-msg{margin:0;font-weight:700;min-height:1.4em}.form-msg.ok{color:#127a4b}.form-msg.err{color:#b3261e}

/* footer */
.foot{background:#020f18;color:#9fb4c4;padding:46px 0 22px}
.foot-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
.foot-brand img{border-radius:12px;display:block;margin-bottom:10px}
.foot-brand p{margin:0;font:700 22px/1.1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:#d6e3ec}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}.foot-links a{text-decoration:none;font-weight:600}.foot-links a:hover{color:#fff}
.foot-base{display:flex;justify-content:space-between;align-items:center;margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);font-size:13px}
.coach-link{opacity:.28;display:inline-flex;padding:8px;border-radius:8px;transition:opacity .2s}.coach-link:hover,.coach-link:focus-visible{opacity:.9}

/* inner pages */
.inner{background:var(--chalk);padding:140px 0 90px;min-height:70vh}
.prose{max-width:780px}
.prose h1{font:800 clamp(40px,6vw,64px)/.95 var(--display);text-transform:uppercase;margin:0 0 20px}
.prose h2{font:800 32px/1 var(--display);text-transform:uppercase;margin:34px 0 10px}
.prose p,.prose li{font-size:18px;color:#2b3a49}.prose a{color:var(--lane)}
.prose .meta{color:#68798a;margin-bottom:16px}.entry{margin-bottom:40px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-links{position:fixed;inset:64px 0 auto 0;flex-direction:column;background:rgba(3,21,34,.97);padding:14px 20px 24px;margin:0;gap:2px;transform:translateY(-130%);transition:transform .28s;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav.open .nav-links{transform:none}.nav.open{background:rgba(3,21,34,.97)}
  .nav-links a{font-size:19px;padding:14px 6px}
  .burger{display:block}.nav-cta{display:none}.nav-tools{margin-left:auto}
  .hero-water-in,.svc-grid,.app-grid,.contact-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;row-gap:34px}.steps li:nth-child(2)::after{display:none}
  .app-demo .an-panel{margin:0 auto}
}
@media (max-width:560px){
  body{font-size:16px}
  .nav-word small{display:none}.nav-brand img{width:70px}
  .steps{grid-template-columns:1fr}.steps li::after{display:none}.fld-row{grid-template-columns:1fr}
  .hero-land{padding:96px 0 30px}.plate{right:-120px}
  .hero-line{font-size:min(15vw,62px)}
  .hero-cta .btn{flex:1 1 100%}
}