@font-face{font-family:"Plex Mono";src:url(assets/fonts/mono400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(assets/fonts/mono600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Hand";src:url(assets/fonts/hand.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --teal:#008b8b;
  --teal-dark:#006f6f;
  --face:#c0c0c0;
  --face-light:#dcdcdc;
  --paper:#f4f4f4;
  --hi:#ffffff;
  --shade:#808080;
  --edge:#404040;
  --ink:#111111;
  --text:#222222;
  --muted:#505665;
  --navy:#000080;
  --blue:#203ed5;
  --blue-dark:#1528a3;
  --page:#dcdee3;
  --page-alt:#e6e8ec;
  --term:#101419;
  --term-green:#3ddc6a;
  --sticky:#fbe98a;

  --sans:Arial,"Helvetica Neue",Helvetica,"Liberation Sans",sans-serif;
  --mono:"Plex Mono",Consolas,monospace;

  --raised:inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--edge),inset 2px 2px 0 var(--face-light),inset -2px -2px 0 var(--shade);
  --sunken:inset 1px 1px 0 var(--shade),inset -1px -1px 0 var(--hi),inset 2px 2px 0 var(--edge),inset -2px -2px 0 var(--face-light);
  --drop:4px 4px 0 rgba(10,20,30,.28);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--text);font:400 16px/1.55 var(--sans);overflow-x:hidden}
img,svg{display:block}
h1,h2,h3,p{margin:0}
a{color:inherit}
:focus-visible{outline:2px dotted var(--ink);outline-offset:2px}
.wrap{max-width:1248px;margin:0 auto;padding:0 24px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;background:var(--face);color:var(--ink);font:400 16px/1 var(--sans);text-decoration:none;border:0;box-shadow:var(--raised);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--face-light)}
.btn:active{box-shadow:var(--sunken);padding-top:2px;padding-left:22px;padding-right:18px}
.btn--blue{background:var(--blue);color:#fff;font-weight:700;box-shadow:inset 1px 1px 0 #6d86ff,inset -1px -1px 0 #060d3a,inset 2px 2px 0 #3d5bf0,inset -2px -2px 0 var(--blue-dark)}
.btn--blue:hover{background:#2b4be0}
.btn--blue:active{box-shadow:inset 1px 1px 0 #060d3a,inset -1px -1px 0 #6d86ff,inset 2px 2px 0 var(--blue-dark)}
.btn__ico{width:18px;height:18px;flex:none}

/* ---- header ---- */
.top{position:sticky;top:0;z-index:20;background:var(--face);box-shadow:inset 0 1px 0 var(--hi),0 2px 0 var(--ink)}
.top__row{display:flex;align-items:center;gap:24px;min-height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);margin-right:auto;min-width:0}
.brand__ico{width:auto;height:40px;flex:none}
.brand b{display:block;font:700 18px/1.2 var(--sans)}
.brand small{display:block;font-size:14px;color:var(--muted);line-height:1.25}
.nav{display:flex;gap:4px}
.nav a{padding:10px 14px;text-decoration:none;color:var(--ink);font-size:15px}
.nav a:hover{background:var(--face-light);box-shadow:var(--raised)}
.top__cta{min-height:46px}

/* ---- windows ---- */
.win{background:var(--face);padding:3px;box-shadow:var(--raised),var(--drop);display:flex;flex-direction:column;min-width:0}
.win__bar{display:flex;align-items:center;gap:8px;min-height:28px;padding:2px 3px 2px 6px;background:linear-gradient(90deg,var(--navy),#1a3cb0);color:#fff}
.win__ico{width:20px;height:auto;max-height:18px;object-fit:contain;flex:none}
.win__title{flex:1;min-width:0;font:600 14px/1.2 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
.win__ctl{display:flex;gap:2px;flex:none}
.win__ctl i{display:grid;place-items:center;width:20px;height:18px;background:var(--face);color:var(--ink);font:700 12px/1 var(--mono);font-style:normal;box-shadow:inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--edge)}
.win__ctl i:last-child{margin-left:2px}
.win__body{flex:1;background:var(--paper);margin:3px 0 0;box-shadow:var(--sunken);padding:22px}

/* ---- desktop / first screen ---- */
.desk{background:var(--teal);background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:5px 5px;padding:28px 0 40px;border-bottom:2px solid var(--ink)}
.desk__wrap{max-width:1460px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:88px minmax(0,1fr);gap:24px;align-items:start}
.desk__grid{display:grid;grid-template-columns:minmax(0,61fr) minmax(0,39fr);grid-template-areas:"hero about" "dirs about";gap:24px;max-width:1320px}

.icons{display:flex;flex-direction:column;gap:16px}
.icons a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 2px;color:#fff;text-decoration:none;font-size:14px;text-align:center;text-shadow:1px 1px 0 rgba(0,0,0,.5)}
.icons img{width:48px;height:42px;object-fit:contain;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.25))}
.icons a:hover span,.icons a:focus-visible span{background:var(--navy);outline:1px dotted #fff}
.icons span{padding:1px 4px}

.win--hero{grid-area:hero;container:hero/inline-size}
.win--dirs{grid-area:dirs}
.win--about{grid-area:about}

.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);padding:28px 30px 30px}
.hero h1{font:700 clamp(28px,calc((100cqi - 60px) / 10),54px)/1.04 var(--sans);color:var(--ink);letter-spacing:-.02em;margin-bottom:18px}
.hero__text p{max-width:34em;font-size:18px;line-height:1.5;color:var(--text)}
.hero__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.hero .hero__meta{margin-top:18px;font-size:15px;color:var(--muted)}
.hero__side{display:none}
.hero__pc{width:104px;height:auto}
.sticky{display:flex;align-items:center;width:156px;aspect-ratio:340/328;padding:14px 16px 20px 14px;background:url(assets/img/icons/sticky-note.webp) center/100% 100% no-repeat;color:#2a2410;font:600 21px/1.05 "Hand",cursive;transform:rotate(-5deg)}
@container hero (min-width:620px){
  .hero{grid-template-columns:minmax(0,1fr) 150px;gap:0 20px}
  .hero h1{font-size:clamp(30px,calc((100cqi - 230px) / 10),54px)}
  .hero__side{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:18px}
  .sticky{margin-right:-40px}
}

.dirs{list-style:none;margin:3px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:16px}
.dirs li{display:flex}
.dirs__btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:150px;padding:16px 8px;border:0;background:var(--face-light);box-shadow:var(--raised);text-align:center;font:700 15px/1.25 var(--sans);color:var(--ink);cursor:pointer}
.dirs__btn:hover{background:#e8e8e8}
.dirs__btn:hover span{text-decoration:underline}
.dirs__btn:active{box-shadow:var(--sunken)}
.dirs__btn:active img{transform:translate(1px,1px)}
.dir-dlg{padding:3px;border:0;width:min(980px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;color:var(--text)}
.dir-dlg:not([open]){display:none}
.dir-dlg::backdrop{background:rgba(0,40,40,.6)}
.dir-dlg .win__bar{position:sticky;top:0;z-index:1}
.dir-dlg .win__ico{height:18px;width:auto}
.dir-dlg__body{padding:28px 32px 30px}
.dir-dlg__head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.dir-dlg__head img{width:64px;height:auto;max-height:56px;object-fit:contain}
.dir-dlg__head h3{font:700 34px/1.15 var(--sans);color:var(--ink)}
.dir-dlg__lead{font-size:19.5px;line-height:1.55;max-width:62ch}
.dir-dlg__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;margin-top:22px}
.dir-dlg h4{margin:0 0 12px;font:700 19px/1.3 var(--mono);color:var(--ink)}
.dir-dlg__do{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:18px;line-height:1.45}
.dir-dlg__do li{padding-left:26px;position:relative}
.dir-dlg__do li::before{content:"✓";position:absolute;left:0;color:#1d8a3a;font-weight:700}
.dres{list-style:none;margin:0;padding:8px 20px;background:var(--term);display:flex;flex-direction:column;font-family:var(--mono)}
.dres li{display:flex;flex-direction:column;gap:2px;padding:13px 0;border-bottom:1px dashed #33414b}
.dres li:last-child{border-bottom:0}
.dres__k{font-size:15px;color:#8a97a3}
.dres__v{font-size:21px;line-height:1.3;color:#66e889}
.dres__d{font-family:var(--sans);font-size:16.5px;line-height:1.4;color:#d6dee5}
.dir-dlg__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.dirs__ico{width:72px;height:64px;object-fit:contain}

.about{display:flex;flex-direction:column;gap:6px;padding:14px 14px 18px}
.about__photo{width:100%;height:auto;box-shadow:0 0 0 2px var(--edge);margin-bottom:10px}
.about__name{font:700 23px/1.2 var(--sans);color:var(--ink)}
.about__role{color:var(--muted);font-size:15.5px}
.about .about__text{font-size:17px;line-height:1.45;margin-top:8px;color:var(--text)}
.stats{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:10px}
.stats li{display:flex;flex-direction:column;gap:4px;padding:10px 14px 12px;background:var(--face-light);box-shadow:var(--raised)}
.stats b{font:700 30px/1 var(--mono);color:var(--blue)}
.stats span{font-size:14px;line-height:1.3;color:var(--muted)}
.about__links{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px dashed #a8a8a8;display:flex;flex-direction:column;gap:8px;font-size:15px}
.about__links li{display:flex;align-items:center;gap:12px}
.about__links img{width:28px;height:24px;object-fit:contain;flex:none}
.about__links a{color:var(--blue)}

/* ---- tetradka: "about program" dialog ---- */
.desk--mid{padding:48px 0 54px;border-top:2px solid var(--ink)}
.win--app{max-width:1100px;margin:0 auto}
.app{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px;align-items:center;padding:28px}
.app__head{display:flex;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px dashed #b3b7bf}
.app__logo{width:60px;height:60px;flex:none}
.app__head h2{font:700 32px/1.1 var(--sans);color:var(--ink)}
.app__head p{color:var(--muted);font-size:15px}
.app__meta{margin:14px 0 0;display:flex;flex-direction:column;gap:4px}
.app__meta div{display:grid;grid-template-columns:72px 1fr;gap:10px;font-size:15px}
.app__meta dt{font:600 14px/1.5 var(--mono);color:var(--muted)}
.app__meta dd{margin:0;color:var(--ink)}
.app__meta a{color:var(--blue)}
.app__lead{margin-top:16px;font-size:16px}
.app__feat{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 18px}
.app__feat li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.4;color:var(--muted)}
.app__feat svg{width:34px;height:34px;flex:none;padding:3px;background:var(--face);box-shadow:var(--raised)}
.app__feat b{display:block;font-size:15px;color:var(--ink);font-weight:600}
.app__btns{margin-top:22px}
.app__copy{margin-top:14px;font:400 12.5px/1.4 var(--mono);color:var(--muted)}
.app__shot{margin:0;box-shadow:var(--drop)}
.app__shot img{display:block;width:100%;height:auto}

/* ---- about me: properties + message box ---- */
.me{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch}
.me > .win > .win__body{flex:1}
.tabs{display:flex;gap:2px;padding:6px 6px 0;font-size:14px;color:var(--ink)}
.tabs span{padding:4px 12px;background:var(--face);box-shadow:inset 1px 1px 0 var(--hi),inset -1px 0 0 var(--ink),inset 2px 2px 0 var(--face-light)}
.tabs .is-on{position:relative;top:1px;padding-bottom:6px;background:var(--paper);font-weight:600}
.props{list-style:none;margin:0;padding:6px 20px;display:flex;flex-direction:column}
.props li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px dashed #b3b7bf;font-size:15px;line-height:1.45}
.props li:last-child{border-bottom:0}
.props svg{width:18px;height:18px;flex:none;margin-top:2px}
.props b{display:block;font:700 15px/1.35 var(--sans);color:var(--ink);margin-bottom:2px}
.props span{color:var(--text)}
.props a,.msg a{color:var(--blue)}
.msg{display:flex;gap:20px;padding:28px 28px 30px}
.msg__ico{width:44px;height:44px;flex:none}
.msg p{font-size:17px;line-height:1.55;margin-top:14px}
.msg .msg__lead{margin-top:2px;font-weight:600;color:var(--ink)}
.msg__list{list-style:none;margin:14px 0 6px;padding:14px 18px;background:#fff;box-shadow:var(--sunken);font:600 17px/1.8 var(--mono);color:var(--ink)}
.msg__list li{padding-left:1.3em;text-indent:-1.3em}
.msg__list li::before{content:"✓";display:inline-block;width:1.3em;text-indent:0;color:#1d8a3a}

/* ---- sections ---- */
.band{padding:64px 0;background:var(--page);border-bottom:2px solid #b9bcc3}
.band--alt{background:var(--page-alt)}
.sec-title{display:flex;align-items:center;gap:18px;font:600 clamp(24px,2.8vw,34px)/1.15 var(--mono);letter-spacing:-.01em;color:var(--ink);margin-bottom:34px}
.sec-title svg{width:44px;height:44px;flex:none}
.sec-title::after{content:"";flex:1;height:2px;background:var(--shade);box-shadow:0 1px 0 var(--hi);min-width:20px}

.perks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.perk{display:grid;grid-template-rows:48px auto 1fr;gap:16px;padding:24px 22px 26px;background:var(--paper);box-shadow:var(--raised),var(--drop)}
.perk__ico svg{width:48px;height:48px;image-rendering:pixelated}
.perk h3{font:700 18px/1.3 var(--sans);color:var(--ink);min-height:2.6em}
.perk p{color:var(--muted);font-size:16px;line-height:1.5}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.step__body{display:grid;grid-template-rows:48px auto 1fr;gap:16px;padding:22px 22px 24px}
.step__ico svg{width:48px;height:48px;image-rendering:pixelated}
.step h3{font:700 18px/1.3 var(--sans);color:var(--ink);min-height:2.6em}
.step p{color:var(--muted);font-size:16px;line-height:1.5}

/* ---- lesson example: slides ---- */
.lesson{padding:22px 24px 24px}
.lesson__lead{font-size:19px;line-height:1.55}
.lesson__note{margin:10px 0 22px;font-size:17px;line-height:1.5;color:var(--muted)}
.lesson__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.lslide{margin:0;display:flex;flex-direction:column;gap:10px}
.lslide__btn{display:block;padding:2px;border:0;background:#c3c6cc;box-shadow:var(--sunken);cursor:zoom-in}
.lslide__btn img{display:block;width:100%;height:auto}
.lslide__btn:hover img{filter:brightness(1.05)}
.lslide figcaption{display:flex;align-items:center;gap:10px;font:700 16px/1.3 var(--sans);color:var(--ink)}
.lslide figcaption span{display:grid;place-items:center;width:26px;height:26px;background:var(--navy);color:#fff;font:700 14px/1 var(--mono)}
.slide-dlg{padding:3px;border:0;width:min(1200px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto}
.slide-dlg:not([open]){display:none}
.slide-dlg::backdrop{background:rgba(0,40,40,.7)}
.slide-dlg__img{display:block;width:100%;height:auto;max-height:calc(100dvh - 120px);object-fit:contain;margin-top:3px;background:#008b8b}
.slide-dlg__nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 4px 4px;font:400 14px/1 var(--mono);color:var(--ink)}

/* ---- placeholders: text to replace before publishing ---- */

/* ---- shared window parts ---- */
.statusbar{display:flex;gap:3px;margin-top:3px}
.statusbar span{flex:1;padding:4px 8px;box-shadow:var(--sunken);font:400 13px/1.2 var(--mono);color:var(--ink)}
.menubar{display:flex;gap:2px;padding:3px 2px 1px;font-size:14px;color:var(--ink)}
.menubar span{padding:2px 8px}
.menubar span::first-letter{text-decoration:underline}

/* media slot: shows the file name until the file is dropped into assets/ */
.slot{position:relative;margin:0;background:#c3c6cc;box-shadow:var(--sunken);padding:2px;min-width:0}
.slot img,.slot video{display:block;width:100%;height:100%;object-fit:cover;background:#c3c6cc}
.slot video{background:#111}
.slot__empty{display:none}
.slot.is-empty > :not(.slot__empty){display:none}
.slot.is-empty .slot__empty{position:absolute;inset:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:repeating-linear-gradient(45deg,#dfe1e5 0 8px,#d4d6db 8px 16px);color:var(--muted);font:400 13px/1.2 var(--mono)}
.slot__empty svg{width:40px;height:40px;opacity:.75}

.gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;padding:16px}
.gallery{grid-template-columns:repeat(12,minmax(0,1fr))}
.arch{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.arch--video{grid-column:span 8}
.arch--photo{grid-column:span 4}
.arch--photo .arch__photo{cursor:default;position:relative}
.arch--photo .arch__photo img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:cover;object-position:60% 40%}
.arch__photo{display:block;width:100%;flex:1;min-height:0;border:0;cursor:zoom-in}
.arch figcaption{min-height:calc(2.3em + 6px);padding:4px 6px 2px;font:600 21px/1.15 "Hand",cursive;color:var(--ink);text-align:center;text-wrap:balance}
.slot--video{grid-column:span 3;aspect-ratio:16/9}
.arch__video{cursor:default;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0d7f80}
.vp-box{position:relative;width:100%;aspect-ratio:1920/1240}
.vp-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.vp__screen{position:absolute;left:0;top:0;width:100%;padding:0;border:0;background:none;cursor:pointer}
.vp__btn{position:absolute;padding:0;border:0;background:none;cursor:pointer}
.vp__btn:hover{background:rgba(255,255,255,.18)}
.vp__btn:active{background:rgba(0,0,0,.18)}
.vp__btn:focus-visible,.vp__screen:focus-visible{outline:2px dotted #fff;outline-offset:-2px}

.win__x{display:grid;place-items:center;width:22px;height:20px;padding:0;border:0;background:var(--face);color:var(--ink);font:700 14px/1 var(--mono);box-shadow:var(--raised);cursor:pointer}
.win__x:active{box-shadow:var(--sunken)}

.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.case__body{display:flex;flex-direction:column;gap:14px;padding:20px 20px 22px}
.case__head{font:700 19px/1.3 var(--sans);color:var(--ink)}
.case__head small{display:block;margin-top:2px;font:400 15px/1.35 var(--sans);color:var(--muted)}
.case__row{display:grid;grid-template-columns:64px 1fr;gap:10px;padding-bottom:12px;border-bottom:1px dashed #a8a8a8;font-size:15.5px;line-height:1.45}
.case__row b{font:600 14px/1.5 var(--mono);color:var(--muted)}
.case__result{display:flex;gap:14px;align-items:center;padding:14px 16px;background:#eaf7ed;box-shadow:inset 0 0 0 1px #9bd3a9}
.case__result svg{width:44px;height:44px;flex:none}
.case__result p{display:flex;flex-direction:column;color:#15552a}
.case__result small{font:600 13.5px/1.4 var(--mono)}
.case__result strong{font:700 clamp(26px,2.6vw,34px)/1.1 var(--mono);color:#15552a;letter-spacing:-.01em}
.case__result span{font-size:14.5px;line-height:1.35}
.case__quote{font-size:15px;line-height:1.45;font-style:italic;color:var(--text)}
.case__quote span{display:block;margin-top:6px;font-style:normal;font-size:14px;color:var(--muted)}
@supports (grid-template-rows:subgrid){
  @media (min-width:1061px){
    /* rows of the three case windows line up: heading, "было", "срок", result panel, quote */
    .cases{grid-template-rows:repeat(6,auto);row-gap:0}
    .case{grid-row:span 6;display:grid;grid-template-rows:subgrid}
    .case__body{grid-row:span 5;display:grid;grid-template-rows:subgrid;row-gap:14px}
  }
}
.results{margin-top:24px}
.log{list-style:none;margin:3px 0 0;padding:6px 20px 10px;background:var(--term);font:400 15px/1.5 var(--mono);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;color:#d6dee5;background-image:linear-gradient(#33414b,#33414b);background-size:1px calc(100% - 28px);background-position:50% 14px;background-repeat:no-repeat}
.log li{padding:12px 0 12px 22px;position:relative;border-bottom:1px dashed #33414b}
.log li::before{content:">";position:absolute;left:2px;top:12px;color:#8a97a3}
.log li:nth-last-child(-n+2){border-bottom:0}
.log__k{color:#d6dee5}
.log__arrow{color:#8a97a3}
.log__r{color:#66e889}
.log__d{display:block;color:#66e889}
.source{margin-top:14px;font-size:14px;color:var(--muted)}

.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:18px}
.proj{display:flex;flex-direction:column;gap:12px;min-width:0}
.proj__shot{aspect-ratio:3/2;background:#008b8b}
.proj__shot img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:contain;background:#008b8b}
.proj__info{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.proj__info h3{font:600 17px/1.3 var(--sans);color:var(--ink)}
.proj__info p{font-size:15px;line-height:1.45}
.tags{list-style:none;margin:4px 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{padding:2px 8px;background:var(--face);box-shadow:var(--raised);font:400 12.5px/1.5 var(--mono);color:var(--ink)}

.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.review{margin:0}
.review__body{display:flex;flex-direction:column;gap:18px;padding:22px 22px 20px}
.review blockquote{margin:0;font-size:16px;line-height:1.55;color:var(--text)}
.review blockquote strong{font-weight:700;color:var(--ink)}
.review figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px;border-top:1px dashed #a8a8a8}
.review figcaption b{display:block;font-weight:600;color:var(--ink)}
.review figcaption > span:last-child{font-size:14px;color:var(--muted);line-height:1.35}
.cond{display:flex;flex-direction:column;padding:8px 24px 24px}
.cond__facts{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px dashed #a8a8a8}
.cond__fact{display:flex;align-items:center;gap:18px;padding:18px 24px}
.cond__fact + .cond__fact{border-left:1px solid #b8b8b8}
.cond__fact img,.cond__fact svg{width:48px;height:48px;object-fit:contain;flex:none}
.cond__fact small{display:block;font-size:15px;color:var(--muted)}
.cond__fact b{display:block;font:700 26px/1.2 var(--mono);color:var(--ink)}
.cond__who{display:flex;align-items:center;gap:18px;padding:18px 24px;border-bottom:1px dashed #a8a8a8;font-size:16px;color:var(--text)}
.cond__who svg{width:48px;height:48px;flex:none}
.cond__who b{display:block;font:700 19px/1.3 var(--mono);color:var(--ink)}
.cond__prices{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pcard{display:flex;flex-direction:column;gap:10px;padding:18px 20px 16px;background:var(--face-light);box-shadow:var(--raised)}
.pcard__ico{display:flex;height:40px}
.pcard__ico svg{width:40px;height:40px;flex:none}
.pcard__ico svg + svg{margin-left:-10px}
.pcard__name{font:700 19px/1.25 var(--mono);color:var(--ink)}
.pcard__price{display:block;padding:10px 18px;background:#fff;box-shadow:var(--sunken);font:700 clamp(26px,2.6vw,36px)/1.15 var(--mono);color:var(--ink);white-space:nowrap}
.pcard small{text-align:center;font-size:14.5px;color:var(--muted)}
.cond__note{margin:14px 0 0;padding-bottom:18px;border-bottom:1px dashed #a8a8a8;text-align:center;font-size:15px;color:var(--muted)}
.cond__bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:stretch;margin-top:20px}
.trial{display:flex;align-items:center;gap:18px;padding:14px 20px;background:#cfdcf3;box-shadow:var(--sunken)}
.trial__ico{width:40px;height:40px;flex:none}
.trial p{font-size:16px;line-height:1.45;color:var(--text)}
.trial b{display:block;font:700 18px/1.3 var(--mono);color:var(--ink)}
.btn--navy{background:var(--navy);color:#fff;font-weight:700;box-shadow:inset 1px 1px 0 #5a6ad8,inset -1px -1px 0 #000030,inset 2px 2px 0 #2a3aa8,inset -2px -2px 0 #000050}
.btn--navy:hover{background:#0a0a9a}
.cond__cta{align-self:center;min-height:60px;padding:0 26px;font-size:17px}
.ava{display:grid;place-items:center;width:44px;height:44px;flex:none;background:var(--blue);color:#fff;font:600 18px/1 var(--mono);box-shadow:var(--raised)}

/* ---- contact ---- */
.desk--end{padding:64px 0 72px;border-bottom:0}
.win--dialog{max-width:680px;margin:0 auto}
.dialog{display:flex;gap:24px;padding:30px 30px 32px}
.dialog__ico{width:64px;height:64px;flex:none}
.dialog h2{font:700 clamp(26px,3vw,34px)/1.1 var(--sans);color:var(--ink);margin-bottom:14px}
.dialog p{font-size:16.5px;max-width:34em}
.dialog__btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px;max-width:460px}
.dialog__btns .btn{justify-content:center}
.btn--wa{background:#1f9d55;color:#fff;font-weight:700;box-shadow:inset 1px 1px 0 #6fd39a,inset -1px -1px 0 #0b3d20,inset 2px 2px 0 #39b56d,inset -2px -2px 0 #157a40}
.btn--wa:hover{background:#25ad60}
.btn--max{background:#6b3fd4;color:#fff;font-weight:700;box-shadow:inset 1px 1px 0 #a98bf0,inset -1px -1px 0 #2a1460,inset 2px 2px 0 #8460e0,inset -2px -2px 0 #5230a8}
.btn--max:hover{background:#7a4fe0}
.dialog .dialog__phone{margin-top:16px;font-size:16px;color:var(--muted)}
.dialog__phone a{color:var(--ink);font-weight:700;text-decoration:none;white-space:nowrap}
.dialog__phone a:hover{text-decoration:underline}

/* ---- taskbar ---- */
.taskbar{background:var(--face);box-shadow:inset 0 2px 0 var(--hi),0 -2px 0 var(--ink)}
.taskbar__row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px}
.taskbar__start{min-height:36px;padding:0 12px;font-weight:600;font-size:15px}
.taskbar__start img{width:26px;height:auto}
.taskbar__start[aria-expanded="true"]{box-shadow:var(--sunken);background:var(--face-light)}
.taskbar__tray{display:flex;align-items:center;gap:10px}
.tray__ico{width:18px;height:18px}
.start{position:relative}
.start-menu{position:absolute;left:0;bottom:calc(100% + 6px);z-index:30;display:flex;min-width:260px;background:var(--face);padding:3px;box-shadow:var(--raised),var(--drop)}
.start-menu[hidden]{display:none}
.start-menu__side{writing-mode:vertical-rl;transform:rotate(180deg);padding:10px 6px;background:linear-gradient(0deg,var(--navy),#1a3cb0);color:#fff;font:700 16px/1 var(--sans);letter-spacing:.04em}
.start-menu ul{list-style:none;margin:0;padding:4px 0;flex:1}
.start-menu a{display:flex;align-items:center;gap:12px;min-height:40px;padding:6px 14px;color:var(--ink);text-decoration:none;font-size:15px}
.start-menu a:hover,.start-menu a:focus-visible{background:var(--navy);color:#fff;outline:none}
.start-menu img{width:24px;height:20px;object-fit:contain}
.taskbar__tray{padding:7px 14px;box-shadow:var(--sunken);font:400 14px/1 var(--mono);color:var(--ink)}

/* ---- responsive ---- */
@media (max-width:1199px){
  .desk__wrap{grid-template-columns:minmax(0,1fr);gap:18px}
  .icons{flex-direction:row;justify-content:flex-start;gap:6px;overflow-x:auto}
  .icons a{min-width:84px}
  .dirs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dirs li{min-height:120px}
}
@media (max-width:899px){
  .cond__prices{grid-template-columns:minmax(0,1fr)}
  .cond__bottom{grid-template-columns:minmax(0,1fr)}
  .cond__cta{justify-content:center;align-self:stretch}
  .desk__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "about" "dirs";gap:18px}
  .about__photo{max-width:460px}
}
@media (max-width:1060px){
  .perks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app{grid-template-columns:minmax(0,1fr);gap:26px}
  .me{grid-template-columns:minmax(0,1fr)}

  .app__shot{max-width:640px}
  .nav{display:none}
  .cases{grid-template-columns:minmax(0,1fr)}
  .reviews{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .projects{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .nav{display:none}
  .top__row{gap:12px;min-height:60px}
  .brand__ico{width:32px;height:32px}
  .brand b{font-size:15.5px}
  .brand small{font-size:12.5px}
  .top__cta{min-height:40px;padding:0 14px;font-size:14.5px}
  .desk{padding:18px 0 28px}
  .desk__grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .icons{justify-content:space-between;gap:2px}
  .icons a{min-width:0;flex:1;font-size:12px;padding:4px 0}
  .icons img{width:38px;height:32px}
  .hero{padding:22px 18px 24px}
  .hero__text p{font-size:16.5px}
  .hero__btns .btn{flex:1 1 220px;justify-content:center}
  .dirs{gap:10px;padding:10px}
  .dirs li{min-height:112px;font-size:14px;gap:8px}
  .dirs__ico{width:56px;height:50px}
  .stats b{font-size:26px}
  .band{padding:40px 0 44px}
  .sec-title{gap:12px;margin-bottom:26px}
  .sec-title svg{width:38px;height:38px}
  .sec-title::after{display:none}
  .perks{grid-template-columns:minmax(0,1fr);gap:16px}
  .perk{grid-template-rows:auto;padding:18px 16px 20px}
  .perk h3{min-height:0}
  .steps{grid-template-columns:minmax(0,1fr);gap:16px}
  .step__body{grid-template-rows:auto;padding:18px 16px 20px}
  .step h3{min-height:0}
  .gallery{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 10px;padding:10px}
  .arch figcaption{font-size:19px;min-height:0}
  .slot--video{grid-column:1 / -1}
  .arch--video,.arch--photo{grid-column:1 / -1}
  .arch--photo .arch__photo{aspect-ratio:1060/1484;flex:none}
  .cases,.reviews,.projects{grid-template-columns:minmax(0,1fr);gap:18px}
  .projects{padding:12px}
  .menubar{display:none}
  .lesson{padding:16px 14px 18px}
  .lesson__grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .lesson__lead{font-size:17px}
  .lesson__note{font-size:15.5px}
  .slide-dlg__nav .btn{padding:0 12px}
  .dir-dlg__body{padding:18px 16px 20px}
  .dir-dlg__cols{grid-template-columns:minmax(0,1fr)}
  .dir-dlg__head h3{font-size:26px}
  .dir-dlg__lead{font-size:17.5px}
  .dir-dlg__do{font-size:16.5px}
  .dres__v{font-size:19px}
  .dres__d{font-size:15.5px}
  .dir-dlg__btns .btn{flex:1 1 100%;justify-content:center}
  .cond{padding:4px 16px 16px}
  .cond__facts{grid-template-columns:minmax(0,1fr)}
  .cond__fact{padding:14px 4px}
  .cond__fact + .cond__fact{border-left:0;border-top:1px dashed #a8a8a8}
  .cond__who{padding:14px 4px;align-items:flex-start}
  .cond__fact b{font-size:22px}
  .trial{padding:12px 14px}
  .desk--mid{padding:32px 0 36px}
  .props{padding:4px 14px}
  .msg{flex-direction:column;gap:12px;padding:18px 16px 20px}
  .msg__list{font-size:14.5px;padding:10px 12px}
  .app{padding:18px 16px 20px}
  .app__head h2{font-size:27px}
  .app__logo{width:48px;height:48px}
  .app__feat{grid-template-columns:minmax(0,1fr)}
  .app__btns .btn{width:100%;justify-content:center}
  .log{grid-template-columns:minmax(0,1fr);padding:4px 14px 8px;background-image:none;font-size:14px}
  .log li:nth-last-child(2){border-bottom:1px dashed #33414b}
  .band{padding:40px 0}
  .desk--end{padding:40px 0 48px}
  .dialog{flex-direction:column;gap:14px;padding:22px 18px 24px}
  .dialog__ico{width:52px;height:52px}
  .dialog__btns{max-width:none}
  .wrap{padding:0 16px}
}
@media (max-width:380px){
  .brand small{display:none}
  .icons span{font-size:10.5px;padding:1px 1px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}