@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;650;700&family=Playfair+Display:ital,wght@1,400;1,500&display=swap');

:root {
  color-scheme: dark;
  --ink:#101713; --deep:#0b100d; --panel:#141c15; --ivory:#f1f0e8;
  --gold:#d8bb83; --gold-light:#eed6a0; --muted:#b7c0b4; --line:rgba(214,222,205,.17);
  --page:min(1216px, calc(100% - 112px));
  font-family:"DM Sans",system-ui,sans-serif;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth; scroll-padding-top:104px}
body {margin:0; color:var(--ivory); background:var(--ink); -webkit-font-smoothing:antialiased}
img {display:block; max-width:100%}
a {color:inherit; text-decoration:none}
button,summary {font:inherit}
:focus-visible {outline:2px solid var(--gold-light); outline-offset:5px}
h1,h2,h3,p {margin:0}
.wrap {width:var(--page); margin-inline:auto}
.eyebrow {display:block; color:var(--gold); font-size:.69rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase}
.accent {display:block; font-family:"Playfair Display",Georgia,serif; font-weight:400; font-style:italic; letter-spacing:-.065em; color:var(--gold)}
.site-header {position:sticky; z-index:5; top:0; background:rgba(11,16,13,.95); border-bottom:1px solid var(--line); backdrop-filter:blur(14px)}
.header-inner {min-height:76px; display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:center}
.brand {display:inline-flex; gap:11px; align-items:center; width:max-content}
.brand .brand-icon {width:43px; height:43px; flex:none; background:var(--gold); mask:url(/assets/kraken-mark-small.png) center/contain no-repeat}
.brand span {display:grid; gap:3px; color:var(--ivory); font-size:.86rem; letter-spacing:.14em; line-height:1}
.brand small {font-size:.53rem; font-weight:600; letter-spacing:.30em; color:var(--gold)}
.nav {display:flex; align-items:center; gap:25px; color:var(--muted); font-size:.86rem}
.nav a:hover,.nav a:focus-visible,.footer a:hover {color:var(--gold-light)}
.header-end {justify-self:end; display:flex; align-items:center; gap:15px}
.language-list {display:flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:4px}
.language-list a {display:grid; place-items:center; min-height:32px; min-width:33px; color:var(--muted); font-size:.66rem; font-weight:700; letter-spacing:.07em}
.language-list a:hover,.language-list a[aria-current="page"] {color:var(--gold-light); background:#293026}
.button {display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:49px; padding:12px 18px; border:1px solid transparent; border-radius:3px; background:var(--gold); color:#15170f; font-size:.86rem; font-weight:700; line-height:1.25; transition:background .18s ease,border-color .18s ease,transform .18s ease}
.button:hover {background:var(--gold-light); transform:translateY(-2px)}
.button.secondary {background:transparent; color:var(--ivory); border-color:var(--line)}
.button.secondary:hover {border-color:var(--gold); background:#ffffff08}
.button svg,.row-link svg {width:15px; height:15px; flex:none}
.breadcrumb {display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-block:20px 0; color:var(--muted); font-size:.74rem}
.breadcrumb a:hover {color:var(--gold)}
.breadcrumb [aria-current] {color:var(--ivory)}
.hero {position:relative; overflow:hidden; isolation:isolate; border-bottom:1px solid var(--line); background:radial-gradient(ellipse at 73% 46%,#2b2d1b 0,transparent 55%),linear-gradient(160deg,#131c16,var(--deep) 66%)}
.hero-main {min-height:575px; display:grid; grid-template-columns:1.13fr .87fr; align-items:center; gap:54px; padding-block:61px 71px}
.hero-copy .eyebrow {margin-bottom:24px}
.hero h1 {font-size:clamp(3.15rem,6.25vw,6.2rem); letter-spacing:-.08em; line-height:.98; font-weight:650}
.hero h1 .accent {margin-top:7px}
.hero-lead {font-size:clamp(1rem,1.7vw,1.17rem); max-width:37ch; line-height:1.64; color:var(--muted); margin-top:27px}
.actions {display:flex; flex-wrap:wrap; gap:11px; margin-top:28px}
.hero-price {display:flex; align-items:center; flex-wrap:wrap; gap:7px; font-size:.78rem; margin-top:26px; color:var(--muted)}
.hero-price strong {color:var(--gold-light); font-size:.92rem}
.dot {color:var(--gold); padding-inline:3px}
.instrument {position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:center; min-height:414px; padding:25px 27px; overflow:hidden; border:1px solid #bca16a54; border-radius:6px; background:radial-gradient(ellipse at 50% 48%,#403b244f 0%,#141b15c9 67%),#161e17; box-shadow:0 30px 80px #0006,inset 0 0 85px #0b110c8c}
.instrument:before {content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(#e1cd9c0d 1px,transparent 1px),linear-gradient(90deg,#e1cd9c0d 1px,transparent 1px); background-size:26px 26px; mask-image:radial-gradient(ellipse,#000 0,transparent 81%)}
.instrument:after {content:""; position:absolute; z-index:-1; width:94%; aspect-ratio:1; left:3%; top:50%; translate:0 -50%; background:repeating-radial-gradient(circle,#d5b77625 0 1px,transparent 1px 36px); mask-image:radial-gradient(circle,#000 0,transparent 69%); pointer-events:none}
.panel-top {display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:46px}
.panel-top span:first-child,.panel-foot {font-size:.61rem; letter-spacing:.14em; font-weight:700; color:var(--gold)}
.signal {display:inline-block; width:7px; height:7px; border-radius:50%; background:#e5ca86; box-shadow:0 0 16px 3px #c7a46477}
.search-mock {position:relative; width:min(100%,365px); align-self:center; border:1px solid #c9b17a67; border-radius:5px; overflow:hidden; background:#0e1610f2; box-shadow:0 12px 38px #060806ad}
.query {display:flex; gap:10px; align-items:center; min-height:47px; padding:10px 14px; border-bottom:1px solid var(--line); font-size:.76rem; color:var(--ivory)}
.query svg {width:15px; height:15px; color:var(--gold); flex:none}
.ad {padding:17px 15px 20px; display:grid; gap:7px}
.ad-site {display:flex; align-items:center; flex-wrap:wrap; gap:6px; color:var(--muted); font-size:.62rem}
.ad-site b {font-weight:650; color:var(--gold-light)}
.ad strong {font-size:clamp(.93rem,1.55vw,1.12rem); color:var(--gold-light); letter-spacing:-.027em; line-height:1.22}
.ad p {color:var(--muted); font-size:.74rem; line-height:1.55}
.signal-flow {display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:22px; color:var(--muted); font-size:.67rem}
.signal-flow i {width:16px; height:1px; display:inline-block; background:#b69b63; position:relative}
.signal-flow i:after {content:""; width:4px; height:4px; position:absolute; right:0; top:-1.5px; border-right:1px solid #b69b63; border-top:1px solid #b69b63; rotate:45deg}
.panel-foot {display:block; margin-top:38px; color:#b9b79a; text-align:right; font-size:.55rem; letter-spacing:.08em}
.section {padding-block:92px; border-bottom:1px solid var(--line)}
.section-dark {background:#0d140f}
.section-head {display:grid; grid-template-columns:1.3fr .7fr; gap:25px; align-items:end; margin-bottom:37px}
.section h2,.contact h2 {font-size:clamp(2.2rem,4.65vw,4.2rem); line-height:1.02; letter-spacing:-.066em; font-weight:650; margin-top:13px}
.section-head > p,.section-intro,.contact p:not(.eyebrow) {font-size:1rem; line-height:1.65; color:var(--muted); max-width:41ch}
.cards {display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.card {padding:23px 26px 28px; border-left:1px solid var(--line)}
.card:first-child {padding-left:0;border-left:0}
.card-num {font-size:.68rem; font-weight:700; letter-spacing:.12em; color:var(--gold)}
.card h3,.step h3 {font-size:1.32rem; line-height:1.15; letter-spacing:-.041em; margin-block:14px 9px}
.card p,.step p,.faq p,.price-note {font-size:.89rem; line-height:1.68; color:var(--muted)}
.process-grid {display:grid; grid-template-columns:.84fr 1.16fr; gap:70px; align-items:start}
.process-grid .section-intro,.pricing-grid .section-intro {margin-top:16px}
.steps {border-top:1px solid var(--line)}
.step {display:grid; grid-template-columns:45px 1fr; padding:21px 0; border-bottom:1px solid var(--line)}
.step h3 {margin-top:0}
.pricing-grid {display:grid; grid-template-columns:1fr 1fr; gap:62px; align-items:center}
.price-card {padding:26px 30px; border:1px solid #bca16a70; border-radius:4px; background:linear-gradient(146deg,#2a2b1a,#151e16 71%); box-shadow:0 24px 58px #080a0866}
.price-amount {font-size:clamp(2.7rem,5.3vw,4.5rem); line-height:1; letter-spacing:-.075em; font-weight:650; margin-block:9px}
.price-amount small {font-size:.88rem; letter-spacing:0; font-weight:500; color:var(--muted)}
.price-card ul {list-style:none; margin:18px 0 22px; padding:15px 0 0; display:grid; gap:11px; border-top:1px solid var(--line)}
.price-card li {display:flex; gap:8px; align-items:flex-start; font-size:.88rem}
.price-card li span {color:var(--gold)}
.faq {border-top:1px solid var(--line)}
.faq details {border-bottom:1px solid var(--line)}
.faq summary {display:flex; justify-content:space-between; align-items:center; gap:13px; padding-block:20px; cursor:pointer; list-style:none; font-weight:650}
.faq summary::-webkit-details-marker {display:none}
.faq summary:after {content:"+"; font-size:1.3rem; color:var(--gold)}
.faq details[open] summary:after {content:"−"}
.faq p {padding:0 25px 19px 0; max-width:62ch}
.contact {padding-block:85px; background:radial-gradient(ellipse at 90% 20%,#342d18,transparent 64%),#141c15}
.contact-inner {display:grid; grid-template-columns:1.24fr .76fr; gap:36px; align-items:end}
.contact p:not(.eyebrow) {margin-top:15px}
.contact-actions {justify-self:end}
.contact-actions p:not(.eyebrow) {font-size:.72rem; margin-top:9px}
.footer {border-top:1px solid var(--line); color:var(--muted); background:var(--deep); font-size:.78rem}
.footer-inner {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:15px; padding-block:23px}
.row-link {display:inline-flex; align-items:center; gap:10px; color:var(--gold-light); font-size:.89rem; font-weight:700}
.row-link:hover {text-decoration:underline; text-underline-offset:5px}
@media(max-width:1020px) {
  :root {--page:calc(100% - 64px)}
  .header-inner {gap:17px}.nav {gap:15px}
  .hero-main {gap:28px; min-height:530px}
  .instrument {padding-inline:18px}
}
@media(max-width:760px) {
  :root {--page:calc(100% - 40px)}
  html {scroll-padding-top:115px}
  .header-inner {grid-template-columns:1fr auto; gap:0 12px; min-height:65px}
  .nav {grid-row:2; grid-column:1/-1; flex-wrap:wrap; gap:9px 19px; min-height:34px; padding-bottom:10px; font-size:.78rem}
  .header-end {grid-row:1;grid-column:2}
  .brand .brand-icon {width:36px;height:36px}.brand span {font-size:.74rem}
  .language-list a {min-width:31px;min-height:30px}
  .hero-main,.section-head,.process-grid,.pricing-grid,.contact-inner {grid-template-columns:1fr}
  .hero-main {padding-block:37px 43px; gap:35px}
  .hero h1 {font-size:clamp(2.95rem,11vw,5.65rem)}
  .hero-copy .eyebrow {margin-bottom:17px}
  .hero-lead {margin-top:20px}
  .hero-price {margin-top:17px}
  .instrument {min-height:314px; padding:17px}
  .panel-top {margin-bottom:24px}.panel-foot {margin-top:22px}
  .section {padding-block:60px}
  .section-head {gap:14px; margin-bottom:24px}
  .process-grid,.pricing-grid,.contact-inner {gap:25px}
  .contact {padding-block:57px}
  .contact-actions {justify-self:start}
}
@media(max-width:470px) {
  .cards {grid-template-columns:1fr}
  .card,.card:first-child {padding:20px 0; border-left:0}
  .card+.card {border-top:1px solid var(--line)}
  .price-card {padding:20px}
  .brand {gap:5px}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {transition:none!important}
}