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

:root{
  --ink:#182033;
  --night:#0F1728;
  --brand:#4066E0;
  --paper:#F7F8FC;
  --paper-2:#EDF1F8;
  --white:#FFFFFF;
  --muted:#667085;
  --line:#DCE2EC;
  --green:#66B891;
  --max:1240px;
  --sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --ease:cubic-bezier(.22,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
button{color:inherit}
::selection{background:var(--brand);color:#fff}
.container{width:min(calc(100% - 48px),var(--max));margin-inline:auto}
.skip-link{position:fixed;z-index:9999;left:16px;top:12px;padding:10px 14px;background:#fff;border:1px solid var(--ink);transform:translateY(-160%)}
.skip-link:focus{transform:none}

/* Header */
.site-header{position:fixed;z-index:1000;top:0;left:0;right:0;padding:17px 0;transition:.25s var(--ease)}
.site-header.is-scrolled{padding:10px 0;background:rgba(247,244,240,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(36,26,48,.1)}
.site-header.on-dark:not(.is-scrolled){color:#fff}
.header-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:34px}
.brand{display:flex;align-items:center;gap:11px;width:max-content;font-weight:700;letter-spacing:-.04em}
.brand-mark{display:grid;place-items:center;width:37px;height:37px;border:1.5px solid currentColor;border-radius:50%;transition:.25s var(--ease)}
.brand:hover .brand-mark{transform:rotate(-9deg);background:var(--brand);color:#fff;border-color:var(--brand)}
.brand-mark svg{width:20px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.2}
.brand-word{font-size:1.2rem}.brand-word b{color:var(--brand)}
.desktop-nav{justify-self:center;display:flex;gap:28px;align-items:center;font-size:.92rem;font-weight:600}
.desktop-nav a{position:relative;opacity:.7}.desktop-nav a:hover,.desktop-nav a.is-active{opacity:1}
.desktop-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:.2s}
.desktop-nav a:hover::after,.desktop-nav a.is-active::after{transform:scaleX(1)}
.header-cta{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border:1px solid currentColor;border-radius:999px;font-size:.88rem;font-weight:600}
.header-cta span{transition:.2s}.header-cta:hover span{transform:translateX(3px)}
.menu-toggle{display:none;width:42px;height:42px;border:0;background:transparent;cursor:pointer;padding:8px}.menu-toggle span{display:block;height:1.5px;background:currentColor;margin:6px 0}
.mobile-menu{position:fixed;z-index:1100;inset:0;background:var(--night);color:#fff;padding:24px;display:none;flex-direction:column}
.mobile-menu.is-open{display:flex}.mobile-menu-top{display:flex;justify-content:space-between;align-items:center}.menu-close{width:42px;height:42px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:transparent;font-size:1.45rem;cursor:pointer}
.mobile-nav{display:grid;margin:auto 0;gap:3px}.mobile-nav a{font-family:var(--serif);font-size:clamp(2.5rem,12vw,4.2rem);line-height:1.05}.mobile-nav a:hover{color:var(--brand)}
.mobile-foot{display:flex;justify-content:space-between;gap:20px;color:rgba(255,255,255,.65);font-size:.85rem}

/* Global type + controls */
h1,h2,h3,p{margin-top:0}h1,h2,h3{letter-spacing:-.035em;line-height:1.05}
h1{font-size:clamp(3.5rem,8.6vw,8.1rem);font-weight:600}h2{font-size:clamp(2.55rem,5vw,5rem);font-weight:600}h3{font-size:clamp(1.35rem,2.3vw,2rem);font-weight:600}
.serif{font-family:var(--serif);font-weight:400;font-style:italic}.accent{color:var(--brand)}
.lead{font-size:clamp(1.12rem,1.8vw,1.38rem);line-height:1.55;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:51px;padding:12px 19px;border:1px solid var(--ink);border-radius:2px;font-size:.93rem;font-weight:650;transition:.22s var(--ease);cursor:pointer}
.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--ink);color:#fff}.btn-primary:hover{background:var(--brand);border-color:var(--brand)}
.btn-light{background:#fff;color:var(--night);border-color:#fff}.btn-ghost{background:transparent}.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}.btn-brand:hover{background:#fff;color:var(--night);border-color:#fff}
.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:650;border-bottom:1px solid currentColor;padding-bottom:2px}.text-link span{transition:.2s}.text-link:hover span{transform:translate(3px,-2px)}

/* Hero */
.home-hero{min-height:820px;padding:175px 0 90px;overflow:hidden;position:relative}
.home-hero::after{content:"";position:absolute;width:550px;height:550px;border:1px solid rgba(36,26,48,.12);border-radius:50%;right:-255px;top:110px;pointer-events:none}
.hero-layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);gap:72px;align-items:center}
.hero-copy h1{max-width:900px;margin-bottom:30px}.hero-copy h1 .scribble{position:relative;display:inline-block;color:var(--brand);font-family:var(--serif);font-weight:400;font-style:italic;white-space:nowrap}
.hero-copy h1 .scribble::after{content:"";position:absolute;height:11px;left:2%;right:-2%;bottom:-2px;border-bottom:3px solid currentColor;border-radius:50%;transform:rotate(-2deg)}
.hero-copy .lead{max-width:690px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:35px}
.hero-aside{position:relative;min-height:540px}.workbench{position:absolute;inset:20px 0 0 20px;background:var(--night);color:#fff;padding:25px;box-shadow:22px 24px 0 var(--paper-2);transform:rotate(1deg)}
.workbench-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.12);font-size:.76rem;color:rgba(255,255,255,.6)}
.window-dots{display:flex;gap:6px}.window-dots i{width:7px;height:7px;background:rgba(255,255,255,.38);border-radius:50%}.window-dots i:first-child{background:var(--brand)}
.workbench-main{display:grid;gap:12px;padding-top:18px}.wb-file{border:1px solid rgba(255,255,255,.12);padding:15px 16px}.wb-file strong{display:block;font-size:.82rem;margin-bottom:10px}.wb-lines{display:grid;gap:7px}.wb-lines i{height:5px;background:rgba(255,255,255,.11);border-radius:4px}.wb-lines i:nth-child(2){width:74%}.wb-lines i:nth-child(3){width:89%}.wb-lines i:nth-child(4){width:58%}
.wb-status{display:grid;grid-template-columns:1fr 1fr;gap:12px}.wb-stat{padding:15px;border:1px solid rgba(255,255,255,.12)}.wb-stat small{display:block;color:rgba(255,255,255,.52);font-size:.7rem}.wb-stat b{display:block;margin-top:5px;font-size:1.25rem}.wb-stat .good{color:var(--green)}
.sticky-note{position:absolute;right:-18px;bottom:44px;width:190px;padding:18px;background:#FFDCCF;color:var(--ink);font-family:var(--serif);font-size:1.25rem;line-height:1.2;box-shadow:0 15px 35px rgba(36,26,48,.12);transform:rotate(-5deg)}
.hero-meta{display:grid;grid-template-columns:repeat(3,1fr);margin-top:78px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.hero-meta div{padding:18px 20px 18px 0;border-right:1px solid var(--line)}.hero-meta div+div{padding-left:20px}.hero-meta div:last-child{border-right:0}.hero-meta small{display:block;color:var(--muted);font-size:.76rem;margin-bottom:3px}.hero-meta strong{font-size:.95rem}

/* Sections */
.section{padding:120px 0}.section-night{background:var(--night);color:#fff}.section-white{background:#fff}.section-brand{background:var(--brand);color:#fff}.section-line{border-top:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:1fr minmax(280px,430px);gap:70px;align-items:end;margin-bottom:64px}.section-head h2{margin-bottom:0}.section-head .lead{margin-bottom:5px}
.service-ledger{border-top:1px solid var(--line)}.service-row{display:grid;grid-template-columns:84px minmax(220px,.8fr) minmax(280px,1.3fr) auto;gap:28px;align-items:start;padding:32px 0;border-bottom:1px solid var(--line);transition:.2s}.service-row:hover{padding-left:10px}.service-no{font-family:var(--serif);font-size:1.3rem;color:var(--brand)}.service-row h3{margin:0}.service-row p{margin:0;color:var(--muted)}.service-arrow{font-size:1.5rem;line-height:1}

/* Quote strip */
.quote-strip{padding:55px 0;background:var(--brand);color:#fff;overflow:hidden}.quote-line{font-family:var(--serif);font-size:clamp(2rem,4.4vw,4.7rem);line-height:1.05;white-space:nowrap;transform:translateX(-2vw)}

/* Portfolio previews */
.project-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:24px}.project-card{position:relative;min-height:460px;background:#fff;border:1px solid var(--line);overflow:hidden}.project-card.tall{min-height:680px}.project-card.dark{background:var(--ink);color:#fff;border-color:var(--ink)}.project-card a{position:absolute;inset:0;z-index:3}.project-copy{position:absolute;z-index:2;left:28px;right:28px;bottom:26px}.project-copy small{display:block;font-size:.75rem;margin-bottom:8px;opacity:.65}.project-copy h3{margin:0;max-width:520px}.project-art{position:absolute;inset:0 0 115px;overflow:hidden}.site-window{position:absolute;background:#fff;border:1px solid rgba(36,26,48,.14);box-shadow:0 25px 60px rgba(36,26,48,.16)}.site-window .bar{height:30px;border-bottom:1px solid #e7e1e8;display:flex;align-items:center;gap:5px;padding:0 10px}.site-window .bar i{width:5px;height:5px;border-radius:50%;background:#c7bec8}.site-window .bar i:first-child{background:var(--brand)}.site-window .fake{padding:18px}.fake .f-title{width:60%;height:14px;background:var(--ink);margin-bottom:12px}.fake .f-text{width:86%;height:6px;background:#d7d0d8;margin:7px 0}.fake .f-text.short{width:55%}.fake .f-button{width:74px;height:22px;background:var(--brand);margin-top:16px}.fake .f-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:20px}.fake .f-grid i{height:58px;background:#eee8ee}.art-bike{background:#D7E4DF}.art-bike .site-window{width:79%;height:68%;left:9%;top:10%;transform:rotate(-2deg)}.art-event{background:#F1D6CA}.art-event .site-window{width:80%;height:70%;right:7%;top:9%;transform:rotate(2deg)}.art-event .fake .f-title{background:#C33B2D}.art-event .fake .f-button{background:#F2B135}.art-kersen{background:#E9D6DF}.art-kersen .site-window{width:79%;height:70%;left:9%;top:9%;transform:rotate(-1deg)}.art-kersen .fake .f-title{background:#7D1747}.art-kersen .fake .f-button{background:#CE305E}.art-tool{background:#D5D4E9}.art-tool .site-window{width:84%;height:71%;left:8%;top:7%;transform:rotate(1.5deg)}.art-tool .fake .f-title{background:#31518F}.project-card:hover .site-window{transform:translateY(-5px) rotate(0deg);transition:.35s var(--ease)}
.project-card:nth-child(3){grid-column:1/2}.project-card:nth-child(4){grid-column:2/3;margin-top:-220px}

/* Hosting teaser */
.hosting-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center}.server-rack{background:#09070D;border:1px solid rgba(255,255,255,.12);padding:28px;box-shadow:22px 24px 0 rgba(255,255,255,.05)}.rack-line{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1)}.rack-line:last-child{border-bottom:0}.led{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}.rack-line span{color:rgba(255,255,255,.62);font-size:.85rem}.rack-line strong{font-size:.85rem}.hosting-copy .lead{color:rgba(255,255,255,.62)}.check-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 25px;margin:28px 0 34px;padding:0;list-style:none}.check-list li::before{content:"↳";color:var(--brand);margin-right:9px}

/* Process */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.process-step{padding:28px 28px 0 0;border-right:1px solid var(--line);min-height:260px}.process-step+.process-step{padding-left:28px}.process-step:last-child{border-right:0}.process-step .num{font-family:var(--serif);font-size:2rem;color:var(--brand)}.process-step h3{font-size:1.25rem;margin:26px 0 12px}.process-step p{color:var(--muted);font-size:.94rem}

/* CTA/footer */
.cta-box{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;padding:54px 0}.cta-box h2{margin:0;max-width:900px}.footer{background:var(--night);color:#fff;padding:70px 0 30px}.footer-top{display:grid;grid-template-columns:1.4fr repeat(3,.6fr);gap:60px;padding-bottom:55px}.footer-intro p{max-width:370px;color:rgba(255,255,255,.52);font-size:.92rem;margin-top:20px}.footer h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;margin:0 0 18px;color:rgba(255,255,255,.45)}.footer-nav{display:grid;gap:8px;font-size:.92rem}.footer-nav a{color:rgba(255,255,255,.74)}.footer-nav a:hover{color:#fff}.footer-bottom{display:flex;justify-content:space-between;gap:30px;padding-top:25px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.4);font-size:.8rem}

/* Inner page hero */
.page-hero{padding:190px 0 95px;border-bottom:1px solid var(--line)}.page-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:end}.page-hero h1{font-size:clamp(4rem,8vw,8rem);margin-bottom:0}.page-intro{padding-bottom:10px}.page-intro .lead{margin-bottom:24px}
.page-hero.dark{background:var(--night);color:#fff;border-bottom-color:rgba(255,255,255,.12)}.page-hero.dark .lead{color:rgba(255,255,255,.6)}

/* Services */
.service-index{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.service-block{background:var(--paper);padding:42px;min-height:320px;display:flex;flex-direction:column}.service-block .num{font-family:var(--serif);color:var(--brand);font-size:1.35rem}.service-block h2{font-size:clamp(2rem,3.6vw,3.6rem);margin:52px 0 15px}.service-block p{color:var(--muted);max-width:570px}.service-block .text-link{margin-top:auto;width:max-content}

/* Hosting pricing */
.price-intro{max-width:720px;margin-bottom:50px}.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.price-card{background:#fff;border:1px solid var(--line);padding:28px;position:relative}.price-card.popular{border:2px solid var(--ink);transform:translateY(-7px)}.price-card.popular::before{content:"meest gekozen";position:absolute;right:18px;top:18px;font-size:.67rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--brand)}.price-card h3{margin:0 0 5px}.price-card .for{font-size:.85rem;color:var(--muted)}.price{display:flex;align-items:flex-start;margin:33px 0 25px}.price .euro{font-family:var(--serif);font-size:3.5rem;line-height:.9}.price .cents{font-weight:700;font-size:1.05rem;margin:3px 0 0 5px}.price small{align-self:flex-end;color:var(--muted);font-size:.72rem;margin:0 0 5px 9px}.specs{display:grid;gap:10px;padding:22px 0;margin:0 0 25px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);list-style:none;font-size:.9rem}.specs li{display:flex;justify-content:space-between;gap:10px}.specs span{color:var(--muted)}.price-card .btn{width:100%}
.included-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}.included-item{padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.included-item b{display:block;margin-bottom:7px}.included-item p{margin:0;color:var(--muted);font-size:.9rem}
.domain-table{width:100%;border-collapse:collapse}.domain-table tr{border-bottom:1px solid var(--line)}.domain-table td{padding:18px 0}.domain-table td:nth-child(2){text-align:right;font-family:var(--serif);font-size:1.55rem}

/* Feature details */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:70px}.feature-list{display:grid;border-top:1px solid var(--line)}.feature-item{padding:22px 0;border-bottom:1px solid var(--line)}.feature-item h3{font-size:1.15rem;margin-bottom:8px}.feature-item p{margin:0;color:var(--muted);font-size:.92rem}
.tech-note{background:var(--ink);color:#fff;padding:38px;align-self:start;transform:rotate(-1deg)}.tech-note h3{font-family:var(--serif);font-size:2.25rem;font-weight:400}.tech-note p{color:rgba(255,255,255,.65)}.tech-note code{display:block;margin-top:25px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:.8rem;color:#D7C9E5;white-space:pre-wrap}

/* Portfolio page */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:38px}.filter-btn{padding:9px 13px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:.82rem}.filter-btn.is-active,.filter-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}.portfolio-list{display:grid;gap:0;border-top:1px solid var(--line)}.portfolio-item{display:grid;grid-template-columns:150px 1fr 1.1fr 40px;gap:30px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line)}.portfolio-item[hidden]{display:none}.portfolio-item .year{font-family:var(--serif);font-size:1.3rem;color:var(--brand)}.portfolio-item h3{font-size:1.45rem;margin:0}.portfolio-item p{margin:0;color:var(--muted);font-size:.92rem}.portfolio-item .go{font-size:1.3rem;text-align:right}.portfolio-item:hover{padding-left:8px;transition:.2s}

/* Contact */
.contact-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:100px}.contact-details{display:grid;gap:26px}.contact-details div{padding-bottom:20px;border-bottom:1px solid var(--line)}.contact-details small{display:block;color:var(--muted);font-size:.75rem;margin-bottom:5px}.contact-details a,.contact-details strong{font-size:1.05rem}.contact-form{background:#fff;padding:38px;border:1px solid var(--line)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:.78rem;font-weight:700}.field input,.field textarea,.field select{width:100%;border:0;border-bottom:1px solid #BDB4BE;background:transparent;padding:10px 1px 12px;border-radius:0;outline:none}.field textarea{min-height:120px;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brand)}.form-note{font-size:.76rem;color:var(--muted);margin:16px 0 20px}.form-status{margin-top:14px;font-size:.85rem}

/* FAQ */
.faq{border-top:1px solid var(--line)}.faq details{border-bottom:1px solid var(--line);padding:0}.faq summary{list-style:none;display:flex;justify-content:space-between;gap:20px;padding:23px 0;font-weight:650;cursor:pointer}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-family:var(--serif);font-size:1.5rem;color:var(--brand)}.faq details[open] summary::after{content:"−"}.faq details p{max-width:780px;color:var(--muted);padding:0 0 24px;margin:0}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease),transform .65s var(--ease)}.reveal.is-visible{opacity:1;transform:none}

@media(max-width:1024px){
  .desktop-nav,.header-cta{display:none}.menu-toggle{display:block}.header-inner{grid-template-columns:auto 1fr auto}.hero-layout,.page-hero-grid,.hosting-split,.contact-layout{grid-template-columns:1fr}.home-hero{padding-top:145px}.hero-aside{min-height:460px;max-width:620px}.section-head{grid-template-columns:1fr;gap:24px}.project-grid{grid-template-columns:1fr 1fr}.project-card:nth-child(4){margin-top:0}.pricing{grid-template-columns:1fr}.price-card.popular{transform:none}.process-grid{grid-template-columns:1fr 1fr}.process-step:nth-child(2){border-right:0}.process-step:nth-child(n+3){border-top:1px solid var(--line);padding-top:28px}.footer-top{grid-template-columns:1.4fr 1fr 1fr}.footer-top .footer-col:last-child{grid-column:2/4}.two-col{gap:40px}
}
@media(max-width:720px){
  body{font-size:16px}.container{width:min(calc(100% - 30px),var(--max))}.home-hero{min-height:auto;padding:125px 0 65px}.home-hero::after{display:none}.hero-layout{gap:35px}.hero-copy h1{font-size:clamp(3.05rem,15vw,5.2rem)}.hero-copy h1 .scribble{white-space:normal}.hero-aside{min-height:400px}.workbench{inset:5px 8px 0 0;padding:18px}.sticky-note{right:-5px;bottom:13px;width:150px;font-size:1.05rem}.hero-meta{grid-template-columns:1fr;margin-top:48px}.hero-meta div,.hero-meta div+div{border-right:0;border-bottom:1px solid var(--line);padding:14px 0}.hero-meta div:last-child{border-bottom:0}.section{padding:78px 0}.service-row{grid-template-columns:48px 1fr auto;gap:14px}.service-row p{grid-column:2/4}.quote-line{white-space:normal;transform:none}.project-grid{grid-template-columns:1fr}.project-card,.project-card.tall{min-height:450px}.project-card:nth-child(3),.project-card:nth-child(4){grid-column:auto}.check-list{grid-template-columns:1fr}.process-grid{grid-template-columns:1fr}.process-step,.process-step+.process-step{padding:25px 0;border-right:0;border-top:1px solid var(--line);min-height:auto}.process-step:first-child{border-top:0}.cta-box{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr 1fr;gap:40px}.footer-intro{grid-column:1/-1}.footer-top .footer-col:last-child{grid-column:auto}.footer-bottom{display:grid}.page-hero{padding:145px 0 70px}.page-hero-grid{gap:35px}.page-hero h1{font-size:clamp(3.3rem,17vw,5.7rem)}.service-index{grid-template-columns:1fr}.service-block{padding:28px}.included-grid{grid-template-columns:1fr}.two-col{grid-template-columns:1fr}.portfolio-item{grid-template-columns:62px 1fr 28px;gap:15px}.portfolio-item p{grid-column:2/4}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.contact-form{padding:24px}.mobile-foot{display:grid}.server-rack{box-shadow:12px 14px 0 rgba(255,255,255,.05)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}*{animation:none!important;transition:none!important}}


/* =========================================================
   YLnet v2.1 — rustigere typografie & overzichtelijke navigatie
   ========================================================= */
:root{
  --max:1180px;
  --content:760px;
}
body{font-size:16px;line-height:1.65}
.container{width:min(calc(100% - 48px),var(--max))}

/* Rustigere header */
.site-header{padding:14px 0}
.site-header.is-scrolled{padding:9px 0}
.header-inner{grid-template-columns:auto 1fr auto;gap:30px}
.desktop-nav{gap:8px;font-size:.9rem}
.desktop-nav>a,.nav-parent{padding:10px 12px;border-radius:6px}
.desktop-nav>a::after,.nav-parent::after{display:none}
.desktop-nav>a:hover,.desktop-nav>a.is-active,.nav-parent:hover,.nav-parent.is-active{background:rgba(36,26,48,.06)}
.site-header.on-dark:not(.is-scrolled) .desktop-nav>a:hover,
.site-header.on-dark:not(.is-scrolled) .nav-parent:hover,
.site-header.on-dark:not(.is-scrolled) .nav-parent.is-active{background:rgba(255,255,255,.10)}
.header-cta{padding:9px 14px}

/* Desktop submenu */
.nav-item{position:relative}
.nav-parent{display:flex;align-items:center;gap:6px;opacity:.72;font-weight:600;line-height:1}
.nav-parent.is-active,.nav-item:hover .nav-parent,.nav-item:focus-within .nav-parent{opacity:1}
.nav-chevron{font-size:.9rem;transition:transform .2s var(--ease);margin-top:-2px}
.nav-item:hover .nav-chevron,.nav-item:focus-within .nav-chevron{transform:rotate(180deg)}
.submenu{position:absolute;left:0;top:calc(100% + 10px);width:285px;padding:9px;background:#fff;color:var(--ink);border:1px solid rgba(36,26,48,.11);box-shadow:0 18px 50px rgba(19,13,31,.13);border-radius:10px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);transition:.18s var(--ease)}
.submenu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-item:hover .submenu,.nav-item:focus-within .submenu{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.submenu a{display:block;padding:11px 12px;border-radius:7px;opacity:1}
.submenu a::after{display:none!important}
.submenu a:hover,.submenu a.is-active{background:var(--paper)}
.submenu strong{display:block;font-size:.89rem;line-height:1.3}
.submenu small{display:block;margin-top:3px;color:var(--muted);font-size:.72rem;font-weight:400;line-height:1.4}

/* Menuknop — expliciet rechts op mobiel */
.menu-toggle{width:44px;height:44px;padding:10px;border:1px solid rgba(36,26,48,.16);border-radius:8px}
.site-header.on-dark:not(.is-scrolled) .menu-toggle{border-color:rgba(255,255,255,.3)}
.menu-toggle span{height:1.5px;margin:4.5px 0}
.menu-toggle span:nth-child(2){width:75%;margin-left:auto}
.menu-toggle span:nth-child(3){width:52%;margin-left:auto}

/* Mobiel menu: compact i.p.v. reusachtige typografie */
.mobile-menu{display:flex;padding:0;background:rgba(19,13,31,.46);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease)}
.mobile-menu.is-open{opacity:1;visibility:visible;pointer-events:auto}
.mobile-menu-panel{width:min(100%,430px);min-height:100%;margin-left:auto;background:var(--night);padding:20px 22px 25px;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .26s var(--ease);box-shadow:-20px 0 50px rgba(0,0,0,.18)}
.mobile-menu.is-open .mobile-menu-panel{transform:none}
.menu-close{border-radius:8px}
.mobile-nav{display:flex;flex-direction:column;margin:38px 0 30px;gap:0}
.mobile-main-link{font-family:var(--sans)!important;font-size:1.45rem!important;font-weight:600;line-height:1.25!important;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.11)}
.mobile-main-link.is-active,.mobile-nav-group.is-active>.mobile-main-link{color:var(--brand)}
.mobile-nav-group{border-bottom:1px solid rgba(255,255,255,.11);padding-bottom:10px}
.mobile-nav-group>.mobile-main-link{border-bottom:0;padding-bottom:8px}
.mobile-subnav{display:grid;gap:2px;padding:0 0 5px 16px;border-left:1px solid rgba(255,255,255,.16)}
.mobile-subnav a{font-family:var(--sans);font-size:.9rem;line-height:1.4;color:rgba(255,255,255,.68);padding:6px 10px}
.mobile-subnav a:hover,.mobile-subnav a.is-active{color:#fff;background:rgba(255,255,255,.06)}
.mobile-foot{margin-top:auto;padding-top:20px;border-top:1px solid rgba(255,255,255,.10)}
.mobile-foot a{color:inherit}

/* Algemene schaal — minder schreeuwerig, meer leesbaar */
h1,h2,h3{line-height:1.12;letter-spacing:-.03em}
h1{font-size:clamp(3rem,5.7vw,5.35rem)}
h2{font-size:clamp(2rem,3.7vw,3.45rem)}
h3{font-size:clamp(1.25rem,1.8vw,1.7rem)}
.lead{font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.62}

/* Home hero opnieuw in verhouding */
.home-hero{min-height:auto;padding:155px 0 72px}
.hero-layout{grid-template-columns:minmax(0,1.04fr) minmax(330px,.72fr);gap:62px;align-items:center}
.hero-copy h1{max-width:720px;margin-bottom:23px}
.hero-copy .lead{max-width:620px}
.hero-actions{margin-top:28px}
.hero-aside{min-height:430px}
.workbench{inset:12px 0 0 10px;padding:22px;box-shadow:16px 17px 0 var(--paper-2)}
.sticky-note{right:-10px;bottom:22px;width:165px;padding:15px;font-size:1.08rem}
.hero-meta{margin-top:58px}

/* Secties krijgen vaste, logische tekstbreedtes */
.section{padding:88px 0}
.section-head{grid-template-columns:minmax(0,1fr) 350px;gap:56px;align-items:end;margin-bottom:48px}
.section-head h2{max-width:760px}
.section-head .lead{max-width:350px}
.service-row{grid-template-columns:58px minmax(200px,.72fr) minmax(300px,1.28fr) 28px;gap:24px;padding:27px 0}
.service-row p{max-width:610px}
.quote-strip{padding:38px 0}
.quote-line{font-size:clamp(1.65rem,3.15vw,3.15rem);white-space:normal;transform:none;text-align:center;padding-inline:24px}
.project-card{min-height:420px}.project-card.tall{min-height:610px}
.project-copy{left:24px;right:24px;bottom:22px}
.hosting-split{gap:70px}
.process-step{min-height:225px}
.cta-box{padding:42px 0}.cta-box h2{font-size:clamp(2rem,3.4vw,3.2rem);max-width:780px}

/* Binnenpagina's: titel niet langer beeldvullend */
.page-hero{padding:155px 0 70px}
.page-hero-grid{grid-template-columns:minmax(0,1fr) minmax(300px,390px);gap:64px;align-items:end}
.page-hero h1{font-size:clamp(2.8rem,5vw,4.65rem);max-width:830px}
.page-intro{padding-bottom:3px}.page-intro .lead{margin-bottom:16px}
.service-block{padding:34px;min-height:285px}
.service-block h2{font-size:clamp(1.7rem,2.6vw,2.55rem);margin:35px 0 12px}
.tech-note h3{font-size:1.9rem}
.contact-layout{grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);gap:70px}
.contact-layout h2[style]{font-size:clamp(2rem,3.3vw,3.1rem)!important}

@media(max-width:1024px){
  .header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .desktop-nav,.header-cta{display:none}
  .menu-toggle{display:block;margin-left:auto;flex:0 0 auto}
  .brand{flex:0 0 auto}
  .hero-layout,.page-hero-grid,.hosting-split,.contact-layout{grid-template-columns:1fr}
  .hero-copy{max-width:760px}
  .hero-aside{max-width:580px;min-height:390px}
  .page-intro{max-width:650px}
  .section-head{grid-template-columns:1fr;gap:18px}
  .section-head .lead{max-width:650px}
}

@media(max-width:720px){
  body{font-size:15.5px}
  .container{width:min(calc(100% - 32px),var(--max))}
  .site-header{padding:10px 0}
  .brand-mark{width:34px;height:34px}.brand-word{font-size:1.08rem}
  .home-hero{padding:112px 0 54px}
  .hero-layout{gap:30px}
  .hero-copy h1{font-size:clamp(2.55rem,11.8vw,3.65rem);line-height:1.08;margin-bottom:18px}
  .hero-copy .lead{font-size:1rem}
  .hero-actions{margin-top:22px}
  .hero-actions .btn{width:100%}
  .hero-aside{min-height:315px}
  .workbench{inset:3px 6px 0 0;padding:15px;box-shadow:9px 10px 0 var(--paper-2)}
  .workbench-top{padding-bottom:13px}.workbench-main{padding-top:12px;gap:8px}.wb-file,.wb-stat{padding:11px}
  .sticky-note{width:136px;right:-3px;bottom:8px;font-size:.92rem;padding:12px}
  .hero-meta{margin-top:36px}
  .section{padding:60px 0}
  h2{font-size:clamp(1.85rem,8.3vw,2.65rem)}
  h3{font-size:1.28rem}
  .lead{font-size:1rem}
  .section-head{margin-bottom:34px}
  .service-row{grid-template-columns:36px 1fr 22px;gap:12px;padding:22px 0}
  .service-row p{grid-column:2/4;font-size:.92rem}
  .project-card,.project-card.tall{min-height:410px}
  .page-hero{padding:112px 0 50px}
  .page-hero-grid{gap:22px}
  .page-hero h1{font-size:clamp(2.45rem,11vw,3.45rem);line-height:1.08}
  .service-block{padding:24px;min-height:245px}
  .service-block h2{font-size:1.75rem;margin:26px 0 10px}
  .included-item{padding:22px}
  .contact-form{padding:22px}
  .footer{padding-top:52px}
}


/* =========================================================
   YLnet v3 — professionele copy & supplied brand mark
   ========================================================= */
:root{
  --brand:#4066E0;
  --brand-dark:#2F52C4;
  --brand-soft:#EAF0FF;
  --ink:#182033;
  --night:#0F1728;
  --paper:#F7F8FC;
  --paper-2:#EDF1F8;
  --muted:#667085;
  --line:#DCE2EC;
}
body{background:var(--paper);color:var(--ink)}
::selection{background:var(--brand);color:#fff}
.brand{gap:10px;letter-spacing:-.02em}
.brand-logo{display:block;width:40px;height:40px;object-fit:contain;flex:0 0 auto}
.brand-word{font-size:1.15rem;font-weight:700;color:currentColor;letter-spacing:-.025em}
.brand-mark{display:none!important}
.brand:hover .brand-logo{transform:translateY(-1px);transition:.2s var(--ease)}
.site-header.is-scrolled{background:rgba(247,248,252,.94);border-bottom-color:rgba(24,32,51,.09)}
.desktop-nav>a:hover,.desktop-nav>a.is-active,.nav-parent:hover,.nav-parent.is-active{background:rgba(64,102,224,.08);color:var(--ink)}
.site-header.on-dark:not(.is-scrolled) .desktop-nav>a:hover,
.site-header.on-dark:not(.is-scrolled) .nav-parent:hover,
.site-header.on-dark:not(.is-scrolled) .nav-parent.is-active{background:rgba(255,255,255,.10);color:#fff}
.submenu{border-color:rgba(24,32,51,.10);box-shadow:0 18px 50px rgba(15,23,40,.14)}
.submenu a:hover,.submenu a.is-active{background:var(--brand-soft)}
.btn-primary{background:var(--ink);border-color:var(--ink)}
.btn-primary:hover{background:var(--brand);border-color:var(--brand)}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-brand:hover{background:#fff;color:var(--night);border-color:#fff}
.section-brand{background:var(--brand);color:#fff}
.accent{color:var(--brand)}
.quote-strip{background:var(--brand)}
.window-dots i:first-child{background:var(--brand)}
.sticky-note{background:var(--brand-soft);color:var(--ink);font-family:var(--sans);font-size:.93rem;line-height:1.5;font-weight:600;transform:rotate(-2deg);border:1px solid rgba(64,102,224,.18)}
.home-hero::after{border-color:rgba(64,102,224,.14)}
.hero-copy h1 .scribble{color:var(--brand)}
.hero-logo-chip{display:flex;align-items:center;gap:12px;padding:14px 15px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035)}
.hero-logo-chip img{width:38px;height:38px;object-fit:contain}
.hero-logo-chip div{display:grid;gap:1px}.hero-logo-chip small{color:rgba(255,255,255,.52);font-size:.7rem}.hero-logo-chip strong{font-size:.88rem}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.footer-brand img{width:52px;height:52px;object-fit:contain}
.footer-brand strong{font-size:1.18rem;letter-spacing:-.02em}
.footer-intro .brand{display:none}
.section-head h2,.page-hero h1{max-width:840px}
.page-hero .lead{max-width:520px}
.professional-note{padding:18px 20px;border-left:3px solid var(--brand);background:#fff;color:var(--muted);font-size:.95rem}
.contact-details a{font-weight:600}
.price-card.popular{border-color:var(--brand);box-shadow:0 16px 45px rgba(64,102,224,.10)}
.price-card.popular::before{background:var(--brand)}
.filter-btn.is-active,.filter-btn:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.portfolio-item:hover{background:rgba(64,102,224,.045)}
.form-status{color:var(--brand-dark)}
@media(max-width:720px){
  .brand-logo{width:36px;height:36px}.brand-word{font-size:1.03rem}
  .mobile-menu-panel .brand-logo{width:38px;height:38px}
  .sticky-note{width:150px;font-size:.82rem}
}


/* =========================================================
   YLnet v4 — rustige secties, gekleurde dienstheaders,
   duidelijke hostingprijzen en vernieuwde contactpagina
   ========================================================= */

/* Gekleurde headers voor alle diensten */
.page-hero.service-hero,
.page-hero.contact-hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  border-bottom:0;
}
.page-hero.service-hero::after,
.page-hero.contact-hero::after{
  content:"";
  position:absolute;
  right:clamp(-90px,-4vw,-20px);
  bottom:-120px;
  width:390px;
  height:405px;
  background:url('../images/ylnet-logo.png') center/contain no-repeat;
  opacity:.065;
  pointer-events:none;
}
.page-hero.service-hero .container,
.page-hero.contact-hero .container{position:relative;z-index:1}
.page-hero.service-hero .lead,
.page-hero.contact-hero .lead{color:rgba(255,255,255,.76)}
.page-hero.service-hero .accent,
.page-hero.contact-hero .accent{color:#fff}
.hero-services{background:linear-gradient(135deg,#243A72 0%,#1C2C55 100%)}
.hero-web{background:linear-gradient(135deg,#4066E0 0%,#3153BE 100%)}
.hero-app{background:linear-gradient(135deg,#304681 0%,#1F315F 100%)}
.hero-hosting{background:linear-gradient(135deg,#101A31 0%,#0A1120 100%)}
.hero-manage{background:linear-gradient(135deg,#334155 0%,#1E293B 100%)}
.contact-hero{background:linear-gradient(135deg,#263A70 0%,#1B2A52 100%)}

/* Hostingprijzen: prijs als één duidelijk bedrag */
.pricing{gap:22px;align-items:stretch}
.price-card{
  display:flex;
  flex-direction:column;
  padding:30px;
  border-radius:12px;
  border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(24,32,51,.045);
}
.price-card.popular{transform:none;border:2px solid var(--brand);box-shadow:0 18px 42px rgba(64,102,224,.12)}
.price-card.popular::before{display:none}
.price-card-head{min-height:86px}
.price-card-head h3{margin:0 0 8px;font-size:1.55rem}
.price-card-head p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.5}
.popular-badge{
  align-self:flex-start;
  margin:-4px 0 18px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--brand-soft);
  color:var(--brand-dark);
  font-size:.74rem;
  font-weight:700;
}
.price-block{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:24px 0 22px;
  padding:20px 0 22px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.price-block strong{
  font-size:clamp(2.65rem,4vw,3.7rem);
  line-height:1;
  letter-spacing:-.055em;
  color:var(--ink);
}
.price-block span{font-size:.88rem;color:var(--muted)}
.price-card .specs{border:0;padding:0;margin:0 0 26px;flex:1}
.price-card .specs li{padding:8px 0;border-bottom:1px solid rgba(220,226,236,.7)}
.price-card .specs li:last-child{border-bottom:0}
.pricing-footnote{
  margin:24px 0 0;
  padding:16px 18px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  font-size:.88rem;
}
.pricing-footnote strong{color:var(--ink)}

/* Contactpagina: één samenhangend geheel */
.contact-section{background:linear-gradient(to bottom,var(--paper) 0%,#fff 100%);padding-top:0}
.contact-shell{
  display:grid;
  grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);
  gap:28px;
  align-items:stretch;
  position:relative;
  z-index:3;
  margin-top:-34px;
}
.contact-card,
.contact-form-modern{
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 18px 45px rgba(15,23,40,.07);
}
.contact-card{padding:36px}
.contact-card h2{font-size:clamp(1.8rem,2.6vw,2.45rem);margin-bottom:12px}
.contact-card>p{color:var(--muted);margin-bottom:30px}
.contact-list{display:grid;border-top:1px solid var(--line)}
.contact-list>a,.contact-list>div{display:grid;gap:3px;padding:17px 0;border-bottom:1px solid var(--line)}
.contact-list span{font-size:.78rem;color:var(--muted)}
.contact-list strong{font-size:.98rem;line-height:1.45}
.contact-list a:hover strong{color:var(--brand)}
.contact-tip{margin-top:28px;padding:18px;background:var(--brand-soft);border-left:3px solid var(--brand)}
.contact-tip strong{display:block;margin-bottom:5px;font-size:.9rem}
.contact-tip p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.55}
.contact-form-modern{padding:38px}
.form-heading{padding-bottom:26px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.form-heading h2{font-size:clamp(1.8rem,2.6vw,2.45rem);margin-bottom:10px}
.form-heading p{margin:0;color:var(--muted);max-width:650px}
.contact-form-modern .field{gap:8px}
.contact-form-modern .field>span{font-size:.8rem;font-weight:700}
.contact-form-modern .field input,
.contact-form-modern .field textarea,
.contact-form-modern .field select{
  border:1px solid #CDD5E1;
  border-radius:7px;
  background:#fff;
  padding:11px 12px;
}
.contact-form-modern .field input:focus,
.contact-form-modern .field textarea:focus,
.contact-form-modern .field select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(64,102,224,.09);
}
.form-submit-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px}
.form-submit-row .form-note{margin:0;max-width:420px}

/* Sectiekoppen zonder kunstmatige labels */
.section-head>div>h2:first-child,
.two-col>.reveal>h2:first-child{margin-top:0}

@media(max-width:1024px){
  .contact-shell{grid-template-columns:1fr;margin-top:-20px}
  .contact-card{order:2}
  .contact-form-modern{order:1}
}
@media(max-width:720px){
  .page-hero.service-hero::after,.page-hero.contact-hero::after{width:235px;height:245px;right:-70px;bottom:-75px}
  .price-card{padding:24px}
  .price-card-head{min-height:auto}
  .price-block strong{font-size:3rem}
  .contact-shell{width:min(calc(100% - 24px),var(--max));margin-top:-12px;gap:16px}
  .contact-card,.contact-form-modern{padding:23px}
  .form-submit-row{align-items:stretch;flex-direction:column}
  .form-submit-row .btn{width:100%}
}

/* =========================================================
   YLnet v5 — vier hostingpakketten & nette domeinprijzen
   ========================================================= */

/* Vier pakketten op één rij op brede schermen */
.pricing{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.price-card{
  min-width:0;
  padding:26px;
}

/* Titel en 'Meest gekozen' staan op exact dezelfde hoogte */
.price-card-head{
  min-height:104px;
}
.price-title-row{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:36px;
  margin-bottom:8px;
}
.price-title-row h3{
  margin:0;
  font-size:1.45rem;
  line-height:1.1;
}
.popular-badge{
  flex:0 0 auto;
  align-self:auto;
  margin:0;
  padding:5px 9px;
  white-space:nowrap;
  font-size:.68rem;
  line-height:1.2;
}
.price-card-head p{
  margin:0;
  min-height:44px;
}

/* Prijs blijft ook in een smallere vierkolomskaart helder leesbaar */
.price-block{
  margin:20px 0 20px;
  padding:18px 0 20px;
}
.price-block strong{
  font-size:clamp(2.5rem,3.4vw,3.35rem);
  white-space:nowrap;
}
.price-block span{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:5px;
}
.price-block span small{
  font-size:.76rem;
  color:var(--muted);
}

/* Zakelijk pakket met extra technische voorzieningen */
.price-card.business{
  background:linear-gradient(180deg,#fff 0%,#fbfcff 100%);
}
.business-features{
  margin:-4px 0 24px;
  padding:15px 16px;
  border:1px solid rgba(64,102,224,.18);
  background:var(--brand-soft);
  border-radius:8px;
}
.business-features>strong{
  display:block;
  margin-bottom:8px;
  font-size:.78rem;
  color:var(--ink);
}
.business-features ul{
  display:grid;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
.business-features li{
  position:relative;
  padding-left:18px;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.35;
}
.business-features li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--brand);
  font-weight:800;
}

/* Domeinprijzen als rustige prijslijst in plaats van losse tekst */
.domain-table{
  width:100%;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 30px rgba(24,32,51,.04);
}
.domain-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:17px 20px;
  border-bottom:1px solid var(--line);
}
.domain-ext{
  font-size:1rem;
  font-weight:650;
  color:var(--ink);
}
.domain-price{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:9px;
  text-align:right;
}
.domain-price strong{
  font-size:1.25rem;
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
}
.domain-price small{
  color:var(--muted);
  font-size:.75rem;
  white-space:nowrap;
}
.domain-note{
  margin:0;
  padding:15px 20px;
  color:var(--muted);
  background:#fafbfe;
  font-size:.78rem;
  line-height:1.55;
}

@media(max-width:1180px){
  .pricing{grid-template-columns:repeat(2,minmax(0,1fr));}
  .price-card-head{min-height:92px;}
}

@media(max-width:720px){
  .pricing{grid-template-columns:1fr;}
  .price-card{padding:23px;}
  .price-card-head{min-height:auto;}
  .price-card-head p{min-height:auto;}
  .price-title-row{min-height:auto;}
  .price-block strong{font-size:3rem;}
  .domain-row{padding:15px 17px;}
  .domain-price{gap:7px;}
  .domain-note{padding:14px 17px;}
}

@media(max-width:390px){
  .price-title-row{align-items:flex-start;flex-wrap:wrap;}
  .domain-price{display:grid;gap:2px;}
}


/* =========================================================
   YLnet v6 — projectbeelden, nieuwe HTML-visuals & hosting
   ========================================================= */

/* Geen logo-watermerk meer in gekleurde dienstheaders */
.page-hero.service-hero::after{display:none!important;background:none!important}

/* Alleen voor screenreader */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Nieuwe hero-visual op home */
.hero-layout-v6{grid-template-columns:minmax(0,1.03fr) minmax(430px,.97fr);gap:72px;align-items:center}
.hero-visual-v6{position:relative;min-height:520px}
.hero-browser-v6{position:absolute;left:0;right:22px;top:25px;background:#fff;border:1px solid #D8DFEA;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(15,23,40,.13)}
.browser-top-v6{height:46px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 16px;border-bottom:1px solid #E4E8F0;color:#8A94A6;font-size:.7rem}
.browser-top-v6>b{justify-self:end;color:#2C7A58;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}.browser-dots-v6{display:flex;gap:5px}.browser-dots-v6 i{width:7px;height:7px;border-radius:50%;background:#CAD1DD}.browser-dots-v6 i:first-child{background:var(--brand)}
.browser-body-v6{padding:18px;background:linear-gradient(135deg,#F9FAFD 0%,#F0F4FB 100%)}
.mini-nav-v6{height:44px;display:flex;align-items:center;gap:14px;padding:0 15px;background:#fff;border:1px solid #E2E7F0;border-radius:8px}.mini-nav-v6 strong{font-size:.72rem;margin-right:auto}.mini-nav-v6 span{width:35px;height:5px;background:#E5E9F0;border-radius:4px}
.mini-hero-v6{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;padding:34px 18px 24px;min-height:310px}.mini-hero-v6 small{display:block;color:var(--brand);font-weight:700;font-size:.62rem;margin-bottom:12px}.mini-hero-v6 strong{display:block;font-size:1.45rem;line-height:1.12;letter-spacing:-.04em}.mini-hero-v6>div:first-child>i{display:block;width:92%;height:6px;margin-top:20px;background:#D7DDE8;border-radius:5px}.mini-hero-v6>div:first-child>i.short{width:62%;margin-top:8px}.mini-hero-v6 button{width:78px;height:28px;border:0;border-radius:5px;background:var(--night);margin-top:24px}.mini-visual-v6{position:relative;border-radius:13px;background:linear-gradient(145deg,#4066E0,#263D91);overflow:hidden}.mini-visual-v6::before{content:"";position:absolute;width:145px;height:145px;border-radius:50%;background:rgba(255,255,255,.13);right:-30px;top:-25px}.mini-visual-v6 span{position:absolute;left:20px;right:20px;height:34px;border-radius:7px;background:rgba(255,255,255,.92)}.mini-visual-v6 span:nth-child(1){top:92px}.mini-visual-v6 span:nth-child(2){top:137px;width:62%;right:auto}.mini-visual-v6 span:nth-child(3){top:182px;width:43%;right:auto;background:rgba(255,255,255,.5)}
.hero-code-v6{position:absolute;left:-25px;bottom:5px;width:255px;background:var(--night);color:#fff;border-radius:12px;box-shadow:0 22px 50px rgba(15,23,40,.24);transform:rotate(-2deg);overflow:hidden}.hero-code-v6>div{display:flex;justify-content:space-between;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.1);font-size:.68rem;color:rgba(255,255,255,.62)}.hero-code-v6>div b{color:#75D7A8}.hero-code-v6 code{display:grid;gap:6px;padding:16px 18px;font-size:.68rem;color:#B7C3E8}.hero-code-v6 code i{font-style:normal}.hero-code-v6 code i:first-child,.hero-code-v6 code i:last-child{color:#7FA0FF}
.hero-status-v6{position:absolute;right:-10px;bottom:55px;display:flex;align-items:center;gap:11px;padding:14px 17px;background:#fff;border:1px solid #DDE3EC;border-radius:11px;box-shadow:0 16px 35px rgba(15,23,40,.12)}.hero-status-v6 small,.hero-status-v6 strong{display:block}.hero-status-v6 small{font-size:.63rem;color:var(--muted)}.hero-status-v6 strong{font-size:.78rem}.pulse-v6{width:10px;height:10px;border-radius:50%;background:#62B88E;box-shadow:0 0 0 5px rgba(98,184,142,.13)}

/* Projecten home: vaste grid zonder masonry/overlap */
.home-project-grid-v6{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.home-project-v6{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}.home-project-v6:hover{transform:translateY(-4px);box-shadow:0 20px 55px rgba(15,23,40,.08)}.home-project-v6>a{display:block}.home-project-media-v6{aspect-ratio:16/9;overflow:hidden;background:#E9EDF4;border-bottom:1px solid var(--line)}.home-project-media-v6 img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .45s var(--ease)}.home-project-v6:hover img{transform:scale(1.025)}.home-project-copy-v6{position:relative;padding:23px 25px 25px;min-height:126px}.home-project-copy-v6 p{margin:0 0 7px;color:var(--muted);font-size:.78rem}.home-project-copy-v6 h3{margin:0;padding-right:120px;font-size:1.38rem}.home-project-copy-v6 span{position:absolute;right:25px;bottom:27px;color:var(--brand);font-size:.79rem;font-weight:700}.projects-more-v6{margin-top:30px}

/* Nieuwe hosting-visual home */
.hosting-split-v6{grid-template-columns:minmax(390px,.92fr) minmax(0,1.08fr);gap:82px}.hosting-dashboard-v6{background:#0A1020;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:22px;box-shadow:18px 20px 0 rgba(255,255,255,.045)}.hosting-dashboard-head-v6{display:flex;align-items:center;justify-content:space-between;padding-bottom:17px;border-bottom:1px solid rgba(255,255,255,.1)}.hosting-dashboard-head-v6>div{display:flex;align-items:center;gap:9px}.hosting-dashboard-head-v6 strong{font-size:.86rem}.hosting-dashboard-head-v6 small{color:rgba(255,255,255,.45);font-size:.68rem}.cloud-dot-v6{width:9px;height:9px;border-radius:50%;background:#69CB99;box-shadow:0 0 0 5px rgba(105,203,153,.09)}.hosting-metrics-v6{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px 0}.hosting-metrics-v6>div{padding:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:9px}.hosting-metrics-v6 small,.hosting-metrics-v6 strong,.hosting-metrics-v6 span{display:block}.hosting-metrics-v6 small{font-size:.67rem;color:rgba(255,255,255,.45);margin-bottom:7px}.hosting-metrics-v6 strong{font-size:1.45rem;line-height:1.1}.hosting-metrics-v6 span{margin-top:5px;color:rgba(255,255,255,.45);font-size:.66rem}.hosting-services-v6{border:1px solid rgba(255,255,255,.09);border-radius:9px;overflow:hidden}.hosting-services-v6>div{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:.75rem}.hosting-services-v6>div:last-child{border-bottom:0}.hosting-services-v6 span{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.62)}.hosting-services-v6 i{width:6px;height:6px;border-radius:50%;background:#69CB99}.hosting-services-v6 b{font-size:.71rem}.hosting-bottom-v6{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:17px;color:rgba(255,255,255,.46);font-size:.63rem}.hosting-bottom-v6>div{display:flex;gap:4px}.hosting-bottom-v6 i{height:5px;flex:1;min-width:16px;border-radius:5px;background:rgba(64,102,224,.42)}.hosting-bottom-v6 i:nth-child(-n+4){background:#6F8DFC}.hosting-bottom-v6 b{color:rgba(255,255,255,.62);font-weight:600}

/* Portfolio overzicht */
.portfolio-toolbar-v6{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:34px;padding-bottom:25px;border-bottom:1px solid var(--line)}.portfolio-toolbar-v6 h2{margin:0 0 4px;font-size:2rem}.portfolio-toolbar-v6 p{margin:0;color:var(--muted);font-size:.9rem}.filters-v6{margin:0;flex-wrap:wrap;justify-content:flex-end}.portfolio-grid-v6{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}.portfolio-card-v6{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden}.portfolio-card-v6[hidden]{display:none!important}.portfolio-media-v6{aspect-ratio:16/9;overflow:hidden;background:#EEF1F7;border-bottom:1px solid var(--line)}.portfolio-media-v6>img{width:100%;height:100%;object-fit:cover;object-position:top center}.portfolio-body-v6{padding:24px 25px 27px}.portfolio-type-v6{margin:0 0 8px!important;color:var(--brand)!important;font-size:.76rem!important;font-weight:700}.portfolio-body-v6 h2{margin:0 0 10px;font-size:1.55rem}.portfolio-body-v6>p:last-child{margin:0;color:var(--muted);font-size:.92rem;line-height:1.62}.app-media-v6{display:grid;place-items:center;background:linear-gradient(135deg,#EDF2FC,#F8F9FC);padding:22px}.app-media-v6 img{width:auto;height:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 18px 25px rgba(15,23,40,.15))}.tool-preview-v6{height:100%;display:grid;grid-template-columns:70px 1fr;background:#F4F6FA;padding:24px}.tool-sidebar-v6{display:grid;align-content:start;gap:14px;padding:14px;background:#182033;border-radius:8px 0 0 8px}.tool-sidebar-v6 i{height:8px;border-radius:5px;background:rgba(255,255,255,.18)}.tool-sidebar-v6 i:first-child{background:#6F8DFC}.tool-content-v6{padding:18px;background:#fff;border:1px solid #E0E5ED;border-left:0;border-radius:0 8px 8px 0}.tool-top-v6{display:flex;justify-content:space-between;margin-bottom:22px}.tool-top-v6 span{width:38%;height:13px;background:#1F2A44;border-radius:5px}.tool-top-v6 b{width:58px;height:20px;background:#EAF0FF;border-radius:5px}.tool-stats-v6{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}.tool-stats-v6 i{height:54px;background:#F0F3F8;border-radius:6px}.tool-table-v6{display:grid;gap:9px}.tool-table-v6 span{height:9px;background:#E6EAF1;border-radius:4px}.tool-table-v6 span:nth-child(2){width:85%}.tool-table-v6 span:nth-child(3){width:92%}.tool-table-v6 span:nth-child(4){width:73%}

/* Hosting v6: vier gelijke kaarten, compactere specificaties */
.pricing-v6{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;align-items:stretch!important}.price-card-v6{display:flex!important;flex-direction:column!important;min-width:0!important;padding:24px!important;border-radius:12px!important}.price-card-v6 .price-card-head{min-height:86px!important}.price-card-v6 .price-title-row{min-height:34px!important;margin-bottom:7px!important;gap:8px!important;flex-wrap:nowrap!important}.price-card-v6 .price-title-row h3{font-size:1.38rem!important;white-space:nowrap}.price-card-v6 .popular-badge{font-size:.63rem!important;padding:4px 7px!important}.price-card-v6 .price-card-head p{min-height:40px!important;font-size:.82rem!important;line-height:1.42!important}.price-card-v6 .price-block{min-height:102px!important;margin:12px 0 12px!important;padding:16px 0 15px!important;justify-content:center}.price-card-v6 .price-block strong{font-size:clamp(2.35rem,3vw,3.05rem)!important}.price-card-v6 .price-block span{font-size:.78rem!important}.price-card-v6 .specs{margin:0 0 18px!important;flex:1!important}.price-card-v6 .specs li{padding:8px 0!important;min-height:39px!important;font-size:.82rem!important}.price-card-v6 .specs li span{color:var(--muted)}.price-card-v6 .specs li b{text-align:right;font-size:.82rem}.price-card-v6>.btn{width:100%;margin-top:auto;padding:12px 13px;font-size:.82rem}.business-extra-wrap-v6{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:14px}.business-extra-v6{grid-column:4;display:grid;gap:13px;padding:17px 18px;border:1px solid rgba(64,102,224,.22);background:#EEF3FF;border-radius:10px}.business-extra-v6 strong{display:block;font-size:.82rem}.business-extra-v6 p{margin:3px 0 0;color:var(--muted);font-size:.72rem;line-height:1.4}.business-extra-v6 ul{display:grid;gap:5px;margin:0;padding:0;list-style:none}.business-extra-v6 li{position:relative;padding-left:17px;color:#53617B;font-size:.74rem}.business-extra-v6 li::before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:800}

/* Domeinprijzen */
.domain-layout-v6{grid-template-columns:minmax(0,.92fr) minmax(390px,.78fr);align-items:center;gap:90px}.domain-section-v6 h2{font-size:clamp(2.45rem,4.3vw,4.15rem);line-height:1.02;max-width:650px}.domain-card-v6{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 15px 38px rgba(15,23,40,.05)}.domain-price-table-v6{width:100%;border-collapse:collapse}.domain-price-table-v6 th,.domain-price-table-v6 td{padding:15px 19px;border-bottom:1px solid var(--line)}.domain-price-table-v6 tr:last-child th,.domain-price-table-v6 tr:last-child td{border-bottom:0}.domain-price-table-v6 th{text-align:left;font-size:1rem}.domain-price-table-v6 td{text-align:right}.domain-price-table-v6 td strong{font-size:1.2rem;white-space:nowrap}.domain-price-table-v6 td span{display:inline-block;min-width:62px;margin-left:8px;color:var(--muted);font-size:.72rem;text-align:left}.domain-note-v6{margin:0;padding:14px 19px;background:#F8FAFD;border-top:1px solid var(--line);color:var(--muted);font-size:.75rem;line-height:1.5}

@media(max-width:1180px){
  .hero-layout-v6{grid-template-columns:1fr 1fr;gap:45px}.hero-visual-v6{min-height:470px}
  .pricing-v6{grid-template-columns:repeat(2,minmax(0,1fr))!important}.business-extra-wrap-v6{grid-template-columns:repeat(2,minmax(0,1fr))}.business-extra-v6{grid-column:2}
  .domain-layout-v6{gap:45px}
}
@media(max-width:1024px){
  .hero-layout-v6,.hosting-split-v6,.domain-layout-v6{grid-template-columns:1fr}.hero-visual-v6{max-width:720px;width:100%;min-height:500px}.hosting-dashboard-v6{max-width:680px}.domain-card-v6{max-width:640px}.portfolio-toolbar-v6{align-items:flex-start;flex-direction:column;gap:18px}.filters-v6{justify-content:flex-start}
}
@media(max-width:720px){
  .hero-visual-v6{min-height:390px}.hero-browser-v6{right:0}.mini-hero-v6{min-height:245px;padding:24px 12px 18px;grid-template-columns:1fr .72fr}.mini-hero-v6 strong{font-size:1.1rem}.hero-code-v6{left:5px;width:205px}.hero-status-v6{right:4px;bottom:24px;padding:11px 12px}.hero-status-v6 strong{font-size:.68rem}
  .home-project-grid-v6,.portfolio-grid-v6{grid-template-columns:1fr}.home-project-copy-v6 h3{padding-right:0}.home-project-copy-v6 span{position:static;display:inline-block;margin-top:13px}.home-project-copy-v6{min-height:0}
  .hosting-metrics-v6{grid-template-columns:1fr 1fr}.hosting-dashboard-v6{padding:16px}.hosting-bottom-v6{grid-template-columns:1fr;gap:7px}.hosting-bottom-v6>div{display:none}
  .pricing-v6{grid-template-columns:1fr!important}.business-extra-wrap-v6{grid-template-columns:1fr}.business-extra-v6{grid-column:1}.price-card-v6 .price-card-head,.price-card-v6 .price-card-head p{min-height:0!important}.price-card-v6 .price-block{min-height:0!important}.price-card-v6 .price-title-row{flex-wrap:wrap!important}.price-card-v6 .specs li{min-height:0!important}
  .domain-section-v6 h2{font-size:clamp(2.25rem,12vw,3.4rem)}.domain-price-table-v6 th,.domain-price-table-v6 td{padding:13px 15px}.domain-price-table-v6 td span{display:block;min-width:0;margin:2px 0 0;text-align:right}
  .tool-preview-v6{grid-template-columns:46px 1fr;padding:16px}.tool-sidebar-v6{padding:10px}.tool-content-v6{padding:13px}.portfolio-body-v6{padding:21px}
}


/* =========================================================
   YLnet v7 — hero zonder overlap + iPhone app-mockup
   ========================================================= */

/* Home hero: tekst en visual blijven strikt in eigen kolom. */
.home-hero-v7{min-height:auto;padding:148px 0 74px;overflow:hidden;position:relative}
.home-hero-v7::after{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(64,102,224,.14);border-radius:50%;right:-245px;top:105px;pointer-events:none}
.hero-layout-v7{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(420px,.86fr);gap:76px;align-items:center}
.hero-copy-v7{position:relative;z-index:3;min-width:0}
.hero-copy-v7 h1{font-size:clamp(3.25rem,4.65vw,4.9rem);line-height:1.035;letter-spacing:-.055em;max-width:760px;margin:0 0 27px}
.hero-title-line-v7{display:block;white-space:nowrap}
.hero-copy-v7 .lead{max-width:650px;font-size:1.05rem;line-height:1.65}
.hero-copy-v7 .hero-actions{margin-top:30px}

.hero-visual-v7{position:relative;z-index:1;min-width:0;min-height:490px;width:100%;isolation:isolate}
.hero-browser-v7{position:absolute;left:18px;right:0;top:14px;background:#fff;border:1px solid #D8DFEA;border-radius:15px;overflow:hidden;box-shadow:0 30px 80px rgba(15,23,40,.13)}
.browser-top-v7{height:44px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 16px;border-bottom:1px solid #E1E6EE;color:#8B96AA;font-size:.64rem}
.browser-top-v7>b{justify-self:end;text-transform:uppercase;letter-spacing:.08em;color:#31926A;font-size:.62rem}
.browser-dots-v7{display:flex;gap:5px}.browser-dots-v7 i{width:8px;height:8px;border-radius:50%;background:#C8D0DE}.browser-dots-v7 i:first-child{background:#5579EE}
.browser-body-v7{padding:18px 19px 22px;background:#F7F9FC}
.mini-nav-v7{height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border:1px solid #DEE4ED;border-radius:9px;background:#fff}.mini-nav-v7 strong{font-size:.7rem}.mini-nav-v7>div{display:flex;gap:11px}.mini-nav-v7 span{display:block;width:35px;height:5px;border-radius:5px;background:#E1E6EE}.mini-nav-v7 span:last-child{width:27px}
.mini-page-v7{display:grid;grid-template-columns:1.05fr .78fr;gap:20px;padding:31px 0 9px;min-height:285px}
.mini-copy-v7{padding:5px 0 0 4px}.mini-copy-v7 small{display:block;color:var(--brand);font-weight:700;font-size:.62rem;margin-bottom:12px}.mini-copy-v7 strong{display:block;font-size:1.45rem;line-height:1.12;letter-spacing:-.04em}.mini-copy-v7 i{display:block;width:92%;height:6px;margin-top:21px;background:#D7DDE8;border-radius:5px}.mini-copy-v7 i.short{width:63%;margin-top:8px}.mini-copy-v7 button{width:79px;height:29px;border:0;border-radius:5px;background:var(--night);margin-top:25px}
.mini-panel-v7{position:relative;overflow:hidden;border-radius:13px;background:linear-gradient(145deg,#4066E0,#263D91)}.mini-panel-v7::before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.12);right:-37px;top:-32px}.mini-panel-v7 span{position:absolute;left:18px;right:18px;height:34px;border-radius:7px;background:rgba(255,255,255,.92)}.mini-panel-v7 span:nth-child(1){top:79px}.mini-panel-v7 span:nth-child(2){top:124px;width:66%;right:auto}.mini-panel-v7 span:nth-child(3){top:169px;width:46%;right:auto;background:rgba(255,255,255,.55)}.mini-panel-v7 span:nth-child(4){bottom:19px;height:7px;background:rgba(255,255,255,.24)}
.hero-terminal-v7{position:absolute;left:38px;bottom:0;width:235px;background:var(--night);color:#fff;border-radius:12px;box-shadow:0 20px 46px rgba(15,23,40,.22);transform:rotate(-1.4deg);overflow:hidden}.hero-terminal-v7>div{display:flex;justify-content:space-between;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.1);font-size:.67rem;color:rgba(255,255,255,.58)}.hero-terminal-v7>div b{color:#75D7A8}.hero-terminal-v7 code{display:grid;gap:7px;padding:16px 18px 18px;font-size:.68rem;color:#B7C3E8}.hero-terminal-v7 code i{font-style:normal}.hero-terminal-v7 code i:first-child{color:#7FA0FF}
.hero-status-v7{position:absolute;right:0;bottom:47px;display:flex;align-items:center;gap:10px;padding:13px 16px;background:#fff;border:1px solid #DDE3EC;border-radius:11px;box-shadow:0 15px 34px rgba(15,23,40,.11)}.hero-status-v7 small,.hero-status-v7 strong{display:block}.hero-status-v7 small{font-size:.61rem;color:var(--muted)}.hero-status-v7 strong{font-size:.76rem}.pulse-v7{width:10px;height:10px;border-radius:50%;background:#62B88E;box-shadow:0 0 0 5px rgba(98,184,142,.13)}

/* Portfolio app: screenshot staat echt in een iPhone-frame. */
.app-media-v7{height:520px;aspect-ratio:auto!important;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 35%,#FFFFFF 0,#F4F7FD 42%,#E9EEF9 100%);padding:30px;border-bottom:1px solid var(--line)}
.iphone-mockup-v7{position:relative;width:222px;aspect-ratio:9/19.58;padding:7px;background:linear-gradient(145deg,#30333A,#08090C 48%,#272A30);border-radius:43px;box-shadow:0 28px 58px rgba(16,24,40,.24),inset 0 0 0 1px rgba(255,255,255,.18)}
.iphone-screen-v7{width:100%;height:100%;overflow:hidden;border-radius:36px;background:#F7F8FC;position:relative;z-index:1}
.iphone-screen-v7 img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.iphone-island-v7{position:absolute;z-index:3;top:15px;left:50%;transform:translateX(-50%);width:72px;height:20px;border-radius:14px;background:#050608;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.iphone-button-v7{position:absolute;background:#16181D;border-radius:2px;z-index:0}.iphone-button-action-v7{left:-3px;top:79px;width:3px;height:25px}.iphone-button-volume1-v7{left:-3px;top:119px;width:3px;height:43px}.iphone-button-volume2-v7{left:-3px;top:171px;width:3px;height:43px}.iphone-button-power-v7{right:-3px;top:135px;width:3px;height:69px}
.portfolio-card-app-v7 .portfolio-body-v6{border-top:0}

@media(max-width:1320px){
  .hero-layout-v7{grid-template-columns:minmax(0,1fr) minmax(395px,.82fr);gap:52px}
  .hero-copy-v7 h1{font-size:clamp(3.05rem,4.35vw,4.25rem)}
  .hero-visual-v7{min-height:455px}
  .mini-page-v7{min-height:260px}
  .hero-terminal-v7{width:218px;left:25px}
}
@media(max-width:1024px){
  .home-hero-v7{padding:122px 0 62px}
  .hero-layout-v7{grid-template-columns:1fr;gap:42px}
  .hero-copy-v7{max-width:780px}
  .hero-copy-v7 h1{font-size:clamp(3.25rem,7.5vw,4.7rem);max-width:760px}
  .hero-visual-v7{max-width:700px;min-height:490px}
  .hero-browser-v7{left:0}
}
@media(max-width:720px){
  .home-hero-v7{padding:108px 0 52px}
  .hero-copy-v7 h1{font-size:clamp(2.6rem,12vw,3.55rem);line-height:1.06;letter-spacing:-.045em}
  .hero-title-line-v7{white-space:normal}
  .hero-copy-v7 .lead{font-size:1rem}
  .hero-visual-v7{min-height:365px}
  .browser-top-v7{height:39px;padding:0 11px}.browser-body-v7{padding:13px}
  .mini-nav-v7{height:39px;padding:0 10px}.mini-nav-v7 span{width:25px}.mini-page-v7{min-height:210px;padding-top:20px;grid-template-columns:1fr .68fr;gap:12px}.mini-copy-v7 strong{font-size:1.02rem}.mini-copy-v7 i{margin-top:15px}.mini-copy-v7 button{margin-top:18px;width:62px;height:24px}.mini-panel-v7 span:nth-child(1){top:61px}.mini-panel-v7 span:nth-child(2){top:99px}.mini-panel-v7 span:nth-child(3){top:137px}
  .hero-terminal-v7{left:10px;bottom:0;width:190px}.hero-terminal-v7 code{padding:12px 14px;font-size:.61rem}.hero-status-v7{right:3px;bottom:24px;padding:10px 11px}.hero-status-v7 strong{font-size:.66rem}
  .app-media-v7{height:430px;padding:24px}.iphone-mockup-v7{width:183px;border-radius:37px}.iphone-screen-v7{border-radius:31px}.iphone-island-v7{top:13px;width:62px;height:18px}
}
@media(max-width:460px){
  .hero-visual-v7{min-height:330px}.hero-browser-v7{top:8px}.hero-status-v7{display:none}.hero-terminal-v7{width:172px;left:8px}.hero-terminal-v7 code{gap:5px}.app-media-v7{height:390px}.iphone-mockup-v7{width:166px}
}