:root{--ink:#161512;--cream:#f4f0e7;--paper:#fffdf8;--gold:#f2b84b;--orange:#e9693c;--muted:#746f65;--line:#d8d2c6}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.wrap{width:min(1180px,calc(100% - 40px));margin:auto}.site-header{position:sticky;top:0;z-index:100;background:rgba(255,253,248,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(22,21,18,.08)}.nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);font-size:20px;font-weight:650;letter-spacing:-.6px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;background:var(--gold);border:2px solid var(--ink);border-radius:9px;font-family:Georgia,serif;font-size:21px;font-weight:900;transform:rotate(-3deg)}.main-nav{display:flex;align-items:center;gap:34px}.main-nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}.main-nav a{text-decoration:none;color:var(--ink);font-size:14px;font-weight:600}.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:16px 22px;background:var(--ink);color:#fff!important;text-decoration:none;border:2px solid var(--ink);border-radius:4px;font-weight:750;font-size:14px;cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-2px);box-shadow:5px 5px 0 var(--gold)}.btn-small{padding:11px 16px}.menu-toggle{display:none}.hero{position:relative;overflow:hidden;background:var(--cream);min-height:640px;border-bottom:1px solid var(--line)}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(22,21,18,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(22,21,18,.045) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to right,#000,transparent)}.hero-inner{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:42px;align-items:center;padding:78px 0 72px}.eyebrow,.kicker{font-size:12px;letter-spacing:1.7px;font-weight:850}.eyebrow{display:flex;align-items:center;gap:10px}.eyebrow span{width:28px;height:2px;background:var(--orange)}h1{font-family:Georgia,"Times New Roman",serif;font-size:68px;line-height:.98;letter-spacing:-3.5px;margin:25px 0 28px;font-weight:500}h1 em{font-style:italic;color:var(--orange)}.lead{font-size:19px;line-height:1.65;color:#514d46;max-width:620px}.hero-actions{display:flex;align-items:center;gap:30px;margin-top:34px}.text-link{color:var(--ink);font-weight:750;text-underline-offset:5px}.proof{display:flex;gap:35px;margin-top:55px;padding-top:25px;border-top:1px solid var(--line)}.proof div{display:flex;flex-direction:column;gap:4px}.proof b{font-size:13px}.proof span{font-size:12px;color:var(--muted)}.hero-visual{position:relative;min-height:500px;display:grid;place-items:center}.browser-card{position:relative;width:86%;max-width:540px;background:#fff;border:2px solid var(--ink);box-shadow:16px 18px 0 rgba(22,21,18,.13);transform:rotate(2deg);z-index:2}.browser-top{height:38px;border-bottom:2px solid var(--ink);display:flex;align-items:center;gap:6px;padding:0 12px}.browser-top i{width:8px;height:8px;border-radius:50%;background:var(--ink)}.browser-top span{font-size:9px;margin:auto;color:#777}.mock-site{padding:22px;background:#fcfaf5}.mock-nav{display:flex;justify-content:space-between;font-size:8px;padding-bottom:35px}.mock-hero{background:var(--ink);padding:45px 35px;color:#fff}.mock-hero small{font-size:8px;color:var(--gold);letter-spacing:1.5px}.mock-hero h3{font-family:Georgia,serif;font-size:31px;font-weight:500;line-height:1.05;margin:15px 0}.mock-button{width:78px;height:18px;background:var(--gold)}.mock-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.mock-row div{height:62px;background:#e9e3d7}.orbit{position:absolute;border:1px solid #c7bdad;border-radius:50%}.orbit-one{width:470px;height:470px}.orbit-two{width:340px;height:340px}.float-tag{position:absolute;background:var(--gold);border:2px solid var(--ink);padding:12px 15px;font-size:11px;z-index:4;box-shadow:4px 4px 0 var(--ink)}.tag-one{left:0;top:90px;transform:rotate(-5deg)}.tag-two{right:-10px;bottom:70px;transform:rotate(4deg);background:#fff}.ticker{overflow:hidden;background:var(--ink);color:#fff;padding:15px 0;white-space:nowrap;font-size:12px;font-weight:800;letter-spacing:2px}.ticker div{width:max-content;animation:tick 13s linear infinite}.ticker i{color:var(--gold);font-style:normal;margin:0 22px}@keyframes tick{to{transform:translateX(-40%)}}.section{padding:110px 0}.split{display:grid;grid-template-columns:1fr 1fr;gap:110px}.kicker{color:var(--orange)}h2{font-family:Georgia,serif;font-size:52px;line-height:1.05;letter-spacing:-2px;font-weight:500;margin:16px 0 0}.split p,.section-head p,.why p{font-size:17px;line-height:1.7;color:var(--muted)}.dark{display:inline-block;margin-top:12px}.work{background:var(--ink);color:#fff}.section-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:55px}.section-head p{max-width:370px}.work .section-head p{color:#aaa49a}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px 30px}.project:first-child{grid-column:span 2}.project-browser{border:1px solid #47433d;background:#24221e;padding:10px}.mini-top{height:18px;border-bottom:1px solid #4d4942}.project-screen{min-height:300px;padding:55px;background:#e5d7bb;color:var(--ink);display:flex;flex-direction:column;justify-content:center}.project:first-child .project-screen{min-height:410px;background:#d9e0dc}.project-b .project-screen{background:#d9d0c1}.project-c .project-screen{background:#d7c4a6}.project-screen span{font-size:10px;letter-spacing:2px}.project-screen h3{font-family:Georgia,serif;font-size:42px;line-height:1.05;font-weight:500}.project-screen b{font-size:11px}.project-meta{display:flex;justify-content:space-between;align-items:start;padding-top:16px}.project-meta h3{margin:0 0 5px;font-size:17px}.project-meta span{font-size:12px;color:#aaa49a}.project-meta>b{font-family:Georgia,serif;color:#676159}.packages{background:var(--cream)}.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.price-grid article{position:relative;background:var(--paper);border:1px solid var(--line);padding:38px 30px;display:flex;flex-direction:column}.price-grid article.featured{border:2px solid var(--ink);transform:translateY(-8px);box-shadow:8px 8px 0 var(--gold)}.popular{position:absolute;right:18px;top:18px;background:var(--gold);font-size:9px;font-weight:900;padding:7px}.plan-num{font-family:Georgia,serif;color:#aaa296}.price-grid h3{font-family:Georgia,serif;font-size:29px;margin:20px 0 8px}.price-grid p{color:var(--muted);font-size:14px;line-height:1.6;min-height:68px}.price{font-size:34px;font-weight:800;margin:20px 0}.price small{display:block;font-size:10px;color:var(--muted);font-weight:500}.price-grid ul{padding:0;list-style:none;margin:0 0 28px;flex:1}.price-grid li{padding:10px 0;border-bottom:1px solid #ece6db;font-size:13px}.price-grid li:before{content:'✓';margin-right:9px;color:var(--orange);font-weight:900}.btn-outline{background:transparent;color:var(--ink)!important}.price-note{text-align:center;color:var(--muted);font-size:11px;margin-top:35px}.process{background:#fff}.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.steps div{padding:34px 28px;border-right:1px solid var(--line)}.steps div:last-child{border:0}.steps b{font-family:Georgia,serif;color:var(--orange);font-size:18px}.steps h3{font-size:16px;margin-top:55px}.steps p{font-size:13px;line-height:1.6;color:var(--muted)}.why{background:var(--gold)}.why-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:center}.why-card{min-height:420px;background:var(--ink);position:relative;display:grid;place-items:center;transform:rotate(-2deg);box-shadow:12px 12px 0 rgba(22,21,18,.2)}.giant-w{font-family:Georgia,serif;color:var(--gold);font-size:220px;font-weight:900}.stamp{position:absolute;right:-28px;bottom:30px;width:110px;height:110px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);display:grid;place-items:center;text-align:center;font-size:10px;font-weight:900;line-height:1.5;transform:rotate(8deg)}.why .kicker{color:var(--ink)}.why p{color:#3f392f}.checks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:35px;font-size:13px;font-weight:750}.faq{background:var(--paper)}.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}.accordion details{border-top:1px solid var(--line);padding:22px 0}.accordion details:last-child{border-bottom:1px solid var(--line)}.accordion summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;font-weight:750}.accordion summary b{font-size:20px}.accordion p{color:var(--muted);line-height:1.65;font-size:14px;max-width:620px}.start{background:var(--ink);color:#fff}.start-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}.start p{color:#aaa49a;line-height:1.7;max-width:470px}.light{color:var(--gold)}.contact-note{margin-top:45px;display:flex;flex-direction:column;gap:6px}.contact-note span{font-size:11px;color:#777}.contact-note a{color:#fff;font-weight:700}.lead-form{background:var(--paper);color:var(--ink);padding:35px;display:grid;grid-template-columns:1fr 1fr;gap:18px}.lead-form label{font-size:11px;font-weight:800;display:flex;flex-direction:column;gap:8px}.lead-form label:nth-of-type(5){grid-column:span 2}.lead-form input,.lead-form select,.lead-form textarea{width:100%;border:1px solid var(--line);background:#fff;padding:13px;font:inherit;font-size:13px;border-radius:0}.form-btn{grid-column:span 2}.success{grid-column:span 2;background:#e8f5e9;padding:12px;font-size:13px}.site-footer{background:#0f0e0c;color:#fff;padding:65px 0 25px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:70px}.footer-grid>div{display:flex;flex-direction:column;gap:12px}.footer-grid p{color:#817c73;font-size:13px;max-width:380px;line-height:1.6}.footer-grid strong{font-size:11px;color:var(--gold);letter-spacing:1px}.footer-grid a{color:#bbb5ab;text-decoration:none;font-size:13px}.footer-brand{color:#fff}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid #28251f;margin-top:50px;padding-top:20px;color:#6e6961;font-size:10px}.content{padding:100px 0}@media(max-width:850px){.main-nav{display:none;position:absolute;top:76px;left:0;right:0;background:var(--paper);padding:25px;flex-direction:column;border-bottom:1px solid var(--line)}.main-nav.open{display:flex}.main-nav ul{flex-direction:column;align-items:center}.menu-toggle{display:block;background:none;border:0;font-weight:800}.hero-inner,.split,.why-grid,.faq-wrap,.start-grid{grid-template-columns:1fr}.hero-inner{padding-top:70px}.hero-copy{text-align:left}h1{font-size:51px}.hero-visual{min-height:410px}.proof{gap:18px;flex-wrap:wrap}.section{padding:80px 0}h2{font-size:40px}.split{gap:35px}.section-head{align-items:start;flex-direction:column}.work-grid{grid-template-columns:1fr}.project:first-child{grid-column:auto}.project-screen,.project:first-child .project-screen{min-height:300px;padding:35px}.price-grid{grid-template-columns:1fr}.price-grid article.featured{transform:none}.steps{grid-template-columns:1fr 1fr}.lead-form{grid-template-columns:1fr}.lead-form label:nth-of-type(5),.form-btn,.success{grid-column:auto}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:span 2}}@media(max-width:520px){.wrap{width:min(100% - 28px,1180px)}.hero{min-height:auto}.hero-inner{gap:30px}h1{font-size:43px;letter-spacing:-2.4px}.lead{font-size:16px}.hero-actions{align-items:flex-start;flex-direction:column;gap:18px}.hero-visual{min-height:330px}.browser-card{width:96%}.float-tag{display:none}.mock-hero{padding:30px 22px}.mock-hero h3{font-size:25px}.proof{margin-top:40px}.section{padding:65px 0}h2{font-size:35px}.steps{grid-template-columns:1fr}.steps div{border-right:0;border-bottom:1px solid var(--line)}.steps h3{margin-top:25px}.why-card{min-height:310px}.giant-w{font-size:160px}.checks{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}.footer-bottom{gap:15px;flex-direction:column}.project-screen h3{font-size:32px}}

/* v1.2: real logo, tighter desktop layout, faster motion */
.brand-logo{display:block;width:auto;height:auto;max-height:48px;max-width:260px;object-fit:contain}.footer-logo{max-height:54px}.nav-wrap{height:82px}.hero-copy{min-width:0}.hero-visual{min-width:0;min-height:455px}.browser-card{margin-left:auto;margin-right:auto}.ticker div{will-change:transform}.btn{transition:transform .14s ease,box-shadow .14s ease}.main-nav a{transition:opacity .14s ease}.main-nav a:hover{opacity:.68}@media(max-width:1050px){.wrap{width:min(100% - 48px,1180px)}.main-nav{gap:22px}.main-nav ul{gap:22px}h1{font-size:58px}.hero-inner{grid-template-columns:1.08fr .92fr;gap:28px}.browser-card{width:92%}.tag-one{left:-8px}.tag-two{right:0}}@media(max-width:850px){.brand-logo{max-height:42px;max-width:220px}.nav-wrap{height:72px}.main-nav{top:72px}.hero-inner{padding-top:58px;padding-bottom:62px}.hero-visual{min-height:380px}}@media(prefers-reduced-motion:reduce){.ticker div{animation:none}.btn{transition:none}}

/* v1.3 premium hero refresh */
:root{--blue:#2d7df5}
.site-header{background:rgba(255,253,248,.97);box-shadow:0 4px 20px rgba(22,21,18,.04)}
.nav-wrap{height:92px}
.brand-logo{max-height:62px;max-width:420px}
.footer-logo{max-height:72px}
.hero.hero-premium{position:relative;overflow:hidden;background:linear-gradient(180deg,#fffdf8 0%,#fbf8f2 100%)}
.hero-grid{opacity:.75;background-image:linear-gradient(to right, rgba(96,83,52,.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(96,83,52,.08) 1px, transparent 1px);background-size:64px 64px}
.hero-inner{grid-template-columns:.95fr 1.05fr;gap:18px;align-items:center;padding-top:80px;padding-bottom:74px}
.hero-copy{position:relative;z-index:3;padding-right:10px}
h1{font-size:76px;line-height:.95;letter-spacing:-3px;max-width:660px}
h1 em{color:var(--orange);font-style:italic}
.lead{font-size:20px;line-height:1.7;max-width:640px}
.premium-proof{margin-top:48px;gap:18px}
.premium-proof div{background:rgba(255,255,255,.92);box-shadow:0 12px 30px rgba(22,21,18,.07);border:1px solid rgba(22,21,18,.08)}
.premium-visual{position:relative;min-height:760px;display:flex;align-items:center;justify-content:center}
.shape-back{position:absolute;border-radius:28px;pointer-events:none}
.shape-a{width:290px;height:480px;background:linear-gradient(180deg,#f6cb6a 0%,#efb53b 100%);left:40px;top:130px;transform:rotate(18deg);box-shadow:0 28px 60px rgba(209,155,42,.18)}
.shape-b{width:220px;height:220px;border-radius:999px;border:2px solid rgba(206,181,134,.45);right:70px;top:60px}
.shape-c{width:140px;height:220px;background:#a8d0ff;right:25px;bottom:110px;clip-path:polygon(20% 0,100% 8%,85% 100%,0 80%);opacity:.95}
.hero-mockup-frame{position:relative;z-index:2;width:min(100%,760px);filter:drop-shadow(0 30px 60px rgba(22,21,18,.18))}
.hero-mockup-img{display:block;width:100%;height:auto}
.premium-tag{z-index:4;box-shadow:0 12px 28px rgba(22,21,18,.18);font-size:22px;line-height:1.18;padding:18px 22px;border-radius:18px;border:1px solid rgba(22,21,18,.12)}
.premium-tag b{display:inline;font-weight:900}
.tag-one{left:-18px;top:160px;background:#f2bc42;transform:rotate(-6deg);padding:22px 24px 18px}
.tag-two{right:-5px;top:395px;background:#fff;color:var(--ink);transform:rotate(-6deg);padding:22px 24px}
.tag-two b{display:block;margin-top:4px}
.tag-three{right:10px;bottom:86px;background:#fff;color:var(--ink);transform:rotate(6deg);padding:20px 22px}
.ticker div{animation-duration:11s}
.project-browser,.why-card,.lead-form,.price-grid article,.proof div{border-radius:22px}
.btn,.btn-small{border-radius:16px}
.project-screen,.mock-hero{border-radius:18px}
@media(max-width:1200px){
  .hero-inner{grid-template-columns:1fr;gap:26px}
  .hero-copy{padding-right:0}
  h1{font-size:68px;max-width:780px}
  .premium-visual{min-height:680px}
  .hero-mockup-frame{width:min(100%,700px)}
}
@media(max-width:850px){
  .nav-wrap{height:78px}
  .brand-logo{max-height:52px;max-width:300px}
  .main-nav{top:78px}
  h1{font-size:54px;letter-spacing:-2px}
  .lead{font-size:18px}
  .premium-visual{min-height:520px}
  .shape-a{width:170px;height:300px;left:0;top:120px}
  .shape-b{width:130px;height:130px;right:12px;top:20px}
  .shape-c{width:90px;height:150px;right:0;bottom:70px}
  .premium-tag{font-size:16px;padding:14px 16px;border-radius:14px}
  .tag-one{left:0;top:95px}
  .tag-two{right:0;top:auto;bottom:120px}
  .tag-three{display:none}
}
@media(max-width:520px){
  .brand-logo{max-height:48px;max-width:260px}
  h1{font-size:44px}
  .premium-visual{min-height:360px}
  .premium-tag{display:none}
  .shape-a{opacity:.6}
  .shape-b,.shape-c{display:none}
}

/* v1.4: hero rebuilt as native HTML/CSS so it feels integrated, not pasted in */
.hero.hero-premium{background:radial-gradient(circle at 78% 24%,rgba(242,184,75,.18),transparent 24%),linear-gradient(180deg,#fffdf8 0%,#fbf7ee 100%)}
.hero-grid{opacity:.5}
.code-visual{position:relative;min-height:690px;display:flex;align-items:center;justify-content:center;isolation:isolate}
.visual-halo{position:absolute;width:510px;height:510px;border-radius:50%;background:linear-gradient(145deg,rgba(242,184,75,.45),rgba(255,245,205,.08));right:4%;top:8%;z-index:-4}
.visual-paper{position:absolute;border-radius:34px;z-index:-3;box-shadow:0 24px 60px rgba(22,21,18,.08)}
.visual-paper-one{width:340px;height:500px;background:#f4bb46;left:2%;top:18%;transform:rotate(15deg)}
.visual-paper-two{width:180px;height:300px;background:#a7ccff;right:-2%;bottom:12%;transform:rotate(-9deg)}
.site-mockup{position:relative;width:min(100%,720px);background:#fff;border:2px solid #191714;border-radius:28px;overflow:hidden;box-shadow:0 34px 70px rgba(22,21,18,.18),0 14px 0 rgba(22,21,18,.08);transform:rotate(2.2deg);z-index:2}
.site-mockup-browser{height:52px;display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;padding:0 22px;border-bottom:1px solid #e7e1d6;background:#fffdfa}
.browser-dots{display:flex;gap:8px}.browser-dots i{width:10px;height:10px;border-radius:50%;background:#1a1815}.browser-dots i:nth-child(2){background:#f2b84b}.browser-dots i:nth-child(3){background:#8cc26b}.browser-address{justify-self:center;background:#f5f1e9;color:#817a6f;padding:8px 34px;border-radius:999px;font-size:11px}
.site-mockup-nav{min-height:66px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:24px;padding:0 28px;font-size:11px;background:#fff}.site-mockup-nav strong{font-size:12px;letter-spacing:.4px}.site-mockup-nav span{color:#554f46}.site-mockup-nav b{background:#f3b942;padding:10px 16px;border-radius:12px;font-size:10px}
.site-mockup-main{display:grid;grid-template-columns:1.08fr .92fr;background:#151411;color:#fff;padding:32px;gap:24px;align-items:stretch}.site-mockup-copy{padding:12px 2px}.site-mockup-copy small{display:block;color:#f3b942;font-weight:800;letter-spacing:2px;font-size:9px;margin-bottom:18px}.site-mockup-copy h3{font-family:Georgia,serif;font-size:39px;line-height:.96;letter-spacing:-1.5px;margin:0 0 16px}.site-mockup-copy h3 em{color:#f3b942;font-style:normal}.site-mockup-copy p{color:#d0c9bd;font-size:12px;line-height:1.55;max-width:330px}.site-mockup-copy a{display:inline-flex;gap:14px;align-items:center;background:#f3b942;color:#171512;text-decoration:none;font-weight:850;font-size:11px;padding:12px 18px;border-radius:12px;margin-top:8px}
.site-mockup-photo{min-height:285px;background-size:cover;background-position:center;border-radius:20px;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}.growth-badge{position:absolute;right:14px;top:14px;width:44px;height:44px;border-radius:50%;background:#f3b942;color:#171512;display:grid;place-items:center;font-size:22px;font-weight:900;box-shadow:0 8px 18px rgba(0,0,0,.2)}
.site-mockup-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:18px;background:#fff}.site-mockup-metrics div{display:grid;grid-template-columns:34px 1fr;align-items:center;column-gap:10px;padding:12px;border:1px solid #eee7dc;border-radius:15px;background:#fffdfa}.site-mockup-metrics span{grid-row:span 2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e7f2ff;color:#132035;font-weight:900}.site-mockup-metrics div:nth-child(2) span{background:#fff0c8}.site-mockup-metrics div:nth-child(3) span{background:#e5f3e1}.site-mockup-metrics b{font-size:10px}.site-mockup-metrics i{height:6px;background:#ded8ce;border-radius:999px;width:70%;margin-top:4px}
.visual-note{position:absolute;z-index:4;background:#fff;color:#171512;border:1px solid rgba(22,21,18,.12);box-shadow:0 14px 30px rgba(22,21,18,.16);font-size:18px;line-height:1.15}.note-built{left:-10px;top:120px;background:#f3b942;padding:18px 22px;transform:rotate(-7deg);border-radius:14px}.note-results{right:-12px;bottom:115px;padding:20px 22px;border-radius:18px;transform:rotate(-5deg)}.note-results b{font-size:22px}.visual-scribble{position:absolute;z-index:5;font-size:32px;font-weight:900}.scribble-one{left:25px;bottom:170px;transform:rotate(-18deg)}.scribble-two{right:52px;top:98px;color:#f3b942}
@media(max-width:1200px){.code-visual{min-height:620px}.site-mockup{width:min(100%,680px)}.note-built{left:8px}.note-results{right:6px}}
@media(max-width:850px){.code-visual{min-height:520px}.site-mockup{transform:rotate(1deg)}.site-mockup-main{grid-template-columns:1fr;padding:24px}.site-mockup-photo{min-height:220px}.site-mockup-copy h3{font-size:34px}.visual-note{display:none}.visual-paper-one{width:220px;height:340px}.visual-paper-two{width:110px;height:190px}}
@media(max-width:520px){.code-visual{min-height:400px}.site-mockup-browser{grid-template-columns:1fr 2fr 1fr;padding:0 14px}.browser-address{padding:7px 14px}.site-mockup-nav{grid-template-columns:1fr auto;padding:0 18px}.site-mockup-nav span{display:none}.site-mockup-main{padding:18px}.site-mockup-copy h3{font-size:29px}.site-mockup-copy p{font-size:11px}.site-mockup-metrics{padding:12px;gap:6px}.site-mockup-metrics div{padding:8px;grid-template-columns:28px 1fr}.site-mockup-metrics span{width:28px;height:28px}.visual-paper-one{left:-30px;top:90px}.visual-halo{width:320px;height:320px}}

/* v1.5 playful Website Waffle hero voice */
.hero-copy .eyebrow{letter-spacing:1.8px}
.hero-copy h1{max-width:610px}
.hero-copy h1 em{display:inline-block;color:#e9693c;position:relative}
.hero-copy h1 em:after{content:'';position:absolute;left:2%;right:4%;bottom:-10px;height:8px;background:#f2b84b;border-radius:999px;transform:rotate(-1deg);opacity:.95}
.hero-copy .lead{max-width:610px}
@media(max-width:850px){.hero-copy h1 em:after{height:6px;bottom:-7px}}


/* v1.6: hero composition and spacing cleanup */
.hero.hero-premium{
  min-height:auto;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 26%,rgba(242,184,75,.16),transparent 25%),
    linear-gradient(180deg,#fffdf8 0%,#faf6ed 100%);
}
.hero.hero-premium .wrap{
  width:min(1360px,calc(100% - 72px));
}
.hero-grid{
  opacity:.38;
  background-size:56px 56px;
  mask-image:linear-gradient(to right,#000 0%,#000 44%,transparent 86%);
}
.hero-inner{
  grid-template-columns:minmax(0,.88fr) minmax(560px,1.12fr);
  gap:72px;
  align-items:center;
  padding:72px 0 76px;
}
.hero-copy{
  position:relative;
  z-index:5;
  padding:0;
  max-width:610px;
}
.hero-copy .eyebrow{
  margin:0 0 22px;
  letter-spacing:1.65px;
  line-height:1.3;
}
.hero-copy h1{
  font-size:70px;
  line-height:.94;
  letter-spacing:-3.2px;
  max-width:590px;
  margin:0 0 28px;
}
.hero-copy h1 em{
  display:inline-block;
  position:relative;
  color:var(--orange);
}
.hero-copy h1 em:after{
  left:1%;
  right:2%;
  bottom:-9px;
  height:7px;
}
.hero-copy .lead{
  max-width:570px;
  margin:0;
  font-size:18px;
  line-height:1.62;
  color:#4d4942;
}
.hero-actions{
  margin-top:30px;
  gap:28px;
}
.hero-actions .btn{
  padding:17px 25px;
  border-radius:14px;
}
.hero-actions .text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.premium-proof{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  max-width:600px;
  margin-top:38px;
  padding-top:0;
  border-top:0;
}
.premium-proof .proof-item{
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  gap:10px;
  min-height:82px;
  padding:12px 12px;
  border:1px solid rgba(22,21,18,.08);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 28px rgba(22,21,18,.055);
}
.premium-proof .proof-item>div{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.premium-proof .proof-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff0c8;
  color:#171512;
  font-weight:900;
  font-size:15px;
}
.premium-proof .proof-item:nth-child(2) .proof-icon{background:#e7f2ff}
.premium-proof .proof-item:nth-child(3) .proof-icon{background:#e8f2e4}
.premium-proof b{
  font-size:12px;
  line-height:1.15;
}
.premium-proof span:not(.proof-icon){
  font-size:10.5px;
  line-height:1.3;
  color:#7a746a;
}

.code-visual{
  position:relative;
  min-height:590px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 12px 24px 6px;
  isolation:isolate;
}
.visual-halo{
  width:520px;
  height:520px;
  right:7%;
  top:4%;
  background:radial-gradient(circle,rgba(247,195,84,.45) 0%,rgba(247,195,84,.18) 45%,rgba(247,195,84,0) 72%);
  z-index:-4;
}
.visual-plate{
  position:absolute;
  z-index:-2;
  width:78%;
  height:76%;
  right:3%;
  top:12%;
  border-radius:34px;
  background:linear-gradient(145deg,#f4bf4e,#efaa2e);
  transform:rotate(4deg);
  box-shadow:0 28px 70px rgba(183,126,20,.16);
}
.site-mockup{
  width:min(100%,720px);
  transform:rotate(-1deg);
  border:1.5px solid #1c1915;
  border-radius:24px;
  box-shadow:0 34px 70px rgba(22,21,18,.18),0 10px 24px rgba(22,21,18,.08);
  overflow:hidden;
}
.site-mockup-browser{
  height:46px;
  padding:0 20px;
  grid-template-columns:1fr 1.5fr 1fr;
}
.browser-address{
  padding:7px 26px;
  font-size:10px;
}
.site-mockup-nav{
  min-height:60px;
  padding:0 24px;
  gap:18px;
}
.site-mockup-nav b{
  border-radius:10px;
  padding:9px 14px;
}
.site-mockup-main{
  grid-template-columns:1fr .95fr;
  gap:22px;
  padding:28px;
}
.site-mockup-copy{
  padding:8px 0 10px;
}
.site-mockup-copy small{
  margin-bottom:14px;
}
.site-mockup-copy h3{
  font-size:37px;
  line-height:.98;
  margin-bottom:14px;
}
.site-mockup-copy p{
  margin:0 0 12px;
}
.site-mockup-photo{
  min-height:260px;
  border-radius:16px;
  background-position:center 55%;
}
.growth-badge{
  width:42px;
  height:42px;
  right:12px;
  top:12px;
}
.site-mockup-metrics{
  gap:8px;
  padding:14px;
}
.site-mockup-metrics div{
  padding:10px;
  border-radius:13px;
}

.visual-note.note-built{
  left:auto;
  right:7%;
  top:18px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 15px;
  border-radius:999px;
  background:#fffdf8;
  font-size:12px;
  line-height:1;
  transform:rotate(1.5deg);
  box-shadow:0 10px 24px rgba(22,21,18,.11);
}
.visual-note.note-built span{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--gold);
  font-size:12px;
}
.visual-note.note-built b{font-weight:900}

.visual-paper,
.note-results,
.visual-scribble{
  display:none!important;
}

@media(max-width:1180px){
  .hero.hero-premium .wrap{width:min(100% - 52px,1100px)}
  .hero-inner{
    grid-template-columns:1fr;
    gap:34px;
    padding:62px 0 68px;
  }
  .hero-copy{
    max-width:760px;
  }
  .hero-copy h1{
    max-width:720px;
    font-size:66px;
  }
  .hero-copy .lead{max-width:680px}
  .premium-proof{max-width:720px}
  .code-visual{
    min-height:565px;
    max-width:820px;
    width:100%;
    margin:0 auto;
  }
}
@media(max-width:850px){
  .hero.hero-premium .wrap{width:min(100% - 36px,760px)}
  .hero-inner{padding:52px 0 56px}
  .hero-copy h1{
    font-size:54px;
    line-height:.96;
    letter-spacing:-2.4px;
  }
  .hero-copy .lead{font-size:17px}
  .premium-proof{
    grid-template-columns:1fr;
    gap:8px;
  }
  .premium-proof .proof-item{
    min-height:64px;
  }
  .code-visual{
    min-height:470px;
    padding:18px 0;
  }
  .visual-plate{
    width:86%;
    height:72%;
    right:1%;
    top:14%;
  }
  .visual-note.note-built{
    right:3%;
    top:0;
  }
  .site-mockup-main{
    grid-template-columns:1fr;
    padding:22px;
  }
  .site-mockup-photo{
    min-height:210px;
  }
  .site-mockup-copy h3{font-size:32px}
}
@media(max-width:520px){
  .hero.hero-premium .wrap{width:min(100% - 28px,500px)}
  .hero-copy h1{font-size:43px;letter-spacing:-2px}
  .hero-copy .eyebrow{font-size:10px}
  .hero-actions{
    align-items:stretch;
    gap:16px;
  }
  .hero-actions .btn{width:100%}
  .premium-proof{margin-top:30px}
  .code-visual{min-height:390px}
  .visual-note.note-built{display:none}
  .visual-plate{height:68%;top:18%;border-radius:24px}
  .site-mockup{border-radius:18px;transform:none}
  .site-mockup-browser{height:40px}
  .site-mockup-nav{min-height:52px}
  .site-mockup-main{padding:16px}
  .site-mockup-copy h3{font-size:27px}
  .site-mockup-metrics{grid-template-columns:1fr}
  .site-mockup-metrics div:nth-child(n+2){display:none}
}

/* v1.7 real portfolio section rebuilt from the original Waffle Web layout */
.portfolio-section{
  background:#fffdf8;
  color:var(--ink);
  padding:108px 0 116px;
}
.portfolio-wrap{position:relative}
.portfolio-heading{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.65fr);
  gap:70px;
  align-items:end;
  margin-bottom:46px;
}
.portfolio-heading h2{
  max-width:720px;
  margin:12px 0 0;
  font-size:58px;
  line-height:1.02;
  letter-spacing:-2.2px;
}
.portfolio-heading>p{
  margin:0 0 8px;
  max-width:440px;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.portfolio-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  color:inherit;
  text-decoration:none;
  padding:14px 14px 22px;
  border:1px solid #ded8cc;
  border-radius:24px;
  background:#fff;
  box-shadow:0 14px 34px rgba(22,21,18,.055);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.portfolio-card:hover{
  transform:translateY(-5px);
  border-color:#c9beac;
  box-shadow:0 24px 52px rgba(22,21,18,.11);
}
.portfolio-preview{
  overflow:hidden;
  border:1px solid #d4cec3;
  border-radius:16px;
  background:#f1eee7;
}
.portfolio-browserbar{
  height:38px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 13px;
  background:#f8f5ee;
  border-bottom:1px solid #ddd6c9;
}
.portfolio-browserbar>span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#171512;
  opacity:.85;
}
.portfolio-browserbar small{
  margin-left:auto;
  color:#8a8378;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:800;
}
.portfolio-shot{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:linear-gradient(135deg,#ece8df,#dad6cd);
}
.portfolio-shot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform .35s ease;
}
.portfolio-card:hover .portfolio-shot img{transform:scale(1.018)}
.portfolio-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:20px 6px 0;
}
.portfolio-card-top span{
  color:var(--orange);
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.portfolio-card-top b{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:50%;
  background:#f7c253;
  color:#171512;
  font-size:14px;
}
.portfolio-card h3{
  margin:10px 6px 8px;
  font-family:Georgia,serif;
  font-size:29px;
  line-height:1.05;
}
.portfolio-card>p{
  margin:0 6px;
  min-height:70px;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}
.portfolio-url{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:18px 6px 0;
  padding-top:15px;
  border-top:1px solid #e8e2d8;
  color:#171512;
  font-size:12px;
  font-weight:800;
}
.portfolio-url span{font-size:16px}
@media(max-width:980px){
  .portfolio-heading{grid-template-columns:1fr;gap:18px}
  .portfolio-heading h2{font-size:50px}
  .portfolio-heading>p{max-width:650px}
  .portfolio-grid{grid-template-columns:1fr 1fr}
  .portfolio-card:last-child{grid-column:1/-1;max-width:calc(50% - 12px)}
}
@media(max-width:680px){
  .portfolio-section{padding:76px 0 82px}
  .portfolio-heading{margin-bottom:30px}
  .portfolio-heading h2{font-size:40px;letter-spacing:-1.5px}
  .portfolio-grid{grid-template-columns:1fr}
  .portfolio-card:last-child{grid-column:auto;max-width:none}
  .portfolio-card>p{min-height:auto}
}


/* v1.8: Website Waffle brand story section */
.why-fresh{
  position:relative;
  overflow:hidden;
  padding:96px 0;
  background:
    radial-gradient(circle at 12% 16%,rgba(255,255,255,.2),transparent 22%),
    linear-gradient(135deg,#f6bf4d 0%,#f2b84b 54%,#efa934 100%);
}
.why-fresh:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background-image:
    linear-gradient(rgba(22,21,18,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,21,18,.22) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to right,#000,transparent 52%);
}
.why-fresh-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(430px,.95fr) minmax(0,1.05fr);
  gap:88px;
  align-items:center;
}
.recipe-card{
  position:relative;
  overflow:hidden;
  padding:34px;
  border:2px solid var(--ink);
  border-radius:28px;
  background:#fffdf8;
  box-shadow:14px 14px 0 rgba(22,21,18,.2);
  transform:rotate(-1.2deg);
}
.recipe-card:after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-72px;
  top:-68px;
  border-radius:50%;
  background:#e9f2ff;
  opacity:.72;
}
.recipe-card-top{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:150px 1fr;
  gap:25px;
  align-items:center;
  padding-bottom:28px;
  border-bottom:1px solid #ddd5c7;
}
.recipe-waffle{
  position:relative;
  width:150px;
  height:150px;
  padding:15px 14px 14px;
  border:5px solid #092441;
  border-radius:28px;
  background:#f8bd39;
  box-shadow:inset 0 -9px 0 rgba(230,155,17,.22);
}
.recipe-browser-bar{
  height:28px;
  display:flex;
  align-items:center;
  gap:7px;
  margin:-15px -14px 12px;
  padding:0 14px;
  border-bottom:5px solid #092441;
}
.recipe-browser-bar i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#092441;
}
.recipe-browser-bar i:nth-child(2){background:#2e7df6}
.recipe-browser-bar i:nth-child(3){
  background:#fffdf8;
  border:2px solid #092441;
}
.recipe-waffle-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.recipe-waffle-grid span{
  height:39px;
  border-radius:8px;
  background:#092441;
}
.recipe-butter{
  position:absolute;
  width:52px;
  height:29px;
  right:4px;
  top:-14px;
  border-radius:12px 12px 15px 15px;
  background:linear-gradient(180deg,#ffe676,#f2b62c);
  border:2px solid #dd9b16;
  transform:rotate(6deg);
  box-shadow:0 5px 0 rgba(221,155,22,.18);
}
.recipe-butter:after{
  content:"";
  position:absolute;
  width:9px;
  height:25px;
  right:10px;
  top:19px;
  border-radius:0 0 9px 9px;
  background:#f6bd39;
}
.recipe-title span{
  display:block;
  margin-bottom:10px;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.7px;
  color:var(--orange);
}
.recipe-title strong{
  display:block;
  font-family:Georgia,serif;
  font-size:31px;
  line-height:1.05;
  font-weight:500;
  letter-spacing:-1px;
}
.recipe-list{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 18px;
  padding-top:16px;
}
.recipe-list>div{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:10px;
  align-items:start;
  padding:17px 0;
  border-bottom:1px solid #e9e2d6;
}
.recipe-list>div:nth-last-child(-n+2){border-bottom:0}
.recipe-list>div>span{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#fff0c7;
  font-size:10px;
  font-weight:900;
}
.recipe-list p{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.recipe-list b{
  font-size:13px;
}
.recipe-list small{
  color:#7b7469;
  font-size:11px;
  line-height:1.35;
}
.recipe-footer{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:10px;
  padding:16px 18px;
  border-radius:14px;
  background:#161512;
  color:#fff;
}
.recipe-footer span{
  color:#f2b84b;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.recipe-footer b{
  font-size:12px;
}
.why-fresh-copy .kicker{
  color:#161512;
}
.why-fresh-copy h2{
  max-width:650px;
  margin-top:14px;
  font-size:56px;
}
.why-fresh-copy>p{
  max-width:680px;
  margin:24px 0 0;
  color:#4b3d27;
  font-size:17px;
  line-height:1.7;
}
.why-points{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:34px;
}
.why-points>div{
  display:grid;
  grid-template-columns:30px 1fr;
  gap:2px 10px;
  align-items:start;
  min-height:92px;
  padding:17px;
  border:1px solid rgba(22,21,18,.14);
  border-radius:16px;
  background:rgba(255,253,248,.62);
  backdrop-filter:blur(6px);
}
.why-points>div>span{
  grid-row:1 / span 2;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#161512;
  color:#f2b84b;
  font-weight:900;
}
.why-points b{
  font-size:13px;
  line-height:1.25;
}
.why-points small{
  color:#665436;
  font-size:11px;
  line-height:1.35;
}

@media(max-width:1050px){
  .why-fresh-grid{
    grid-template-columns:1fr;
    gap:54px;
  }
  .recipe-card{
    max-width:720px;
    margin:0 auto;
    transform:none;
  }
  .why-fresh-copy{
    max-width:760px;
  }
}
@media(max-width:650px){
  .why-fresh{
    padding:70px 0;
  }
  .recipe-card{
    padding:24px;
    border-radius:22px;
  }
  .recipe-card-top{
    grid-template-columns:105px 1fr;
    gap:18px;
  }
  .recipe-waffle{
    width:105px;
    height:105px;
    padding:12px 10px 10px;
    border-width:4px;
    border-radius:22px;
  }
  .recipe-browser-bar{
    height:22px;
    margin:-12px -10px 9px;
    padding:0 10px;
    border-bottom-width:4px;
  }
  .recipe-browser-bar i{
    width:7px;
    height:7px;
  }
  .recipe-waffle-grid{
    gap:6px;
  }
  .recipe-waffle-grid span{
    height:25px;
    border-radius:6px;
  }
  .recipe-butter{
    width:40px;
    height:23px;
    top:-11px;
  }
  .recipe-title strong{
    font-size:24px;
  }
  .recipe-list{
    grid-template-columns:1fr;
  }
  .recipe-list>div:nth-last-child(-n+2){
    border-bottom:1px solid #e9e2d6;
  }
  .recipe-list>div:last-child{
    border-bottom:0;
  }
  .recipe-footer{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
  .why-fresh-copy h2{
    font-size:42px;
  }
  .why-points{
    grid-template-columns:1fr;
  }
}